import React, { useState, useEffect, useRef, Component } from "react";
import { connect } from "dva";
import { initFilter, extendOrder, guid } from "../../../utils/common";
import { Row, Col, Modal, Table, Button, Select, DatePicker, message } from "antd";
import echarts from "echarts";
import moment from "moment";
import IconFont from "../../../utils/iconFont";
import { T } from "antd/lib/upload/utils";

class BI056Performance extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ColorShow: ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
      isShow1: false,
      isShow2: false,
      dtStart: null,//开始时间
      dtEnd: null,//结束时间
      mineType: 0,//生产单元
      detailForm: {
        formCode: "",
        title: "",
      },
      ret: {
        IsSuccessful: true,
        Data: {
          checkMineType1_1: {
            mineTypeName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
            checkCount: [[3, 3, 3, 3], [12, 12, 12, 6], [24, 24, 24, 12], [90, 90, 120, 36]],
            legendName: ["公司级", "部门级", "车间级", "班组级"],
          },
          riskMineType1_2: {
            legendName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
            riskCount: [16, 23, 8, 1],
          },
          riskDealMonth2_1: {
            legendName: ['已整改', '未整改', '整改率'],
            xAxisName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            countDeal: [5, 10, 8, 5, 12, 15, 10, 9, 8, 10, 11, 6],
            countNotDeal: [0, 1, 1, 2, 3, 2, 0, 1, 3, 3, 3, 2],
            linePercent: [100.00, 90.00, 87.5, 60.00, 75.00, 86.67, 100.00, 88.89, 62.50, 70.00, 72.73, 66.67]
          },
          riskTop2_2: {
            yAxisName: ["隐患名称", "电机车轨道枕木下沉", "电机车刹车闸瓦磨损", "电机车导线线夹断裂", "电机车轨道断裂", "电机车刹车泵漏气"],
            count: [31, 22, 19, 15, 8, 5],
          },
          checkTypeMineType3_1: {
            legendName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
            xAxisName: ["巡回检查", "例行检查", "专业检查", "综合检查", "日常巡检", "防洪安全检查", "坝体安全检查", "库区安全检查", "重大事故隐患专项排查"],
            arrayCount: [[1200, 1200, 300, 500, 0, 0, 0, 0, 100], [500, 1500, 300, 500, 0, 0, 0, 0, 0], [0, 0, 100, 10, 800, 800, 800, 500, 100], [30, 30, 60, 50, 20, 10, 0, 0, 0]],
          },
          checkTypeRiskMineType3_2: {
            legendName: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
            xAxisName: ["巡回检查", "例行检查", "专业检查", "综合检查", "日常巡检", "防洪安全检查", "坝体安全检查", "库区安全检查", "重大事故隐患专项排查"],
            arrayCount: [[10, 10, 3, 5, 0, 0, 0, 0, 1], [15, 15, 3, 5, 0, 0, 0, 0, 0], [0, 0, 1, 10, 20, 10, 9, 5, 1], [1, 2, 3, 2, 0, 0, 0, 0, 0]]
          }
        }
      }
    }
  }

  componentDidMount() {
    this.getBaseInfoData();
  }

  //获取数据
  getBaseInfoDataOnline = (mineType) => {
    const json2 = initFilter(this.props.login.OrgId);
    extendOrder(json2, "CREATE_TIME", 1);
    json2.Parameter1 = mineType;
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BIController/getRiskPerformanceData",
      payload: json2,
      onlyData: false,
      onComplete: (ret) => {
        this.CheckCount1_1(ret?.Data.checkMineType1_1);
        this.RiskCount1_2(ret?.Data.riskMineType1_2, this.state.ColorShow);
        this.RiskCount1_22(ret?.Data.riskMineType1_2, this.state.ColorShow);
        this.RiskTop2_2(ret?.Data.riskTop2_2, this.state.ColorShow);
        this.CheckTypeCount3(ret?.Data.checkTypeMineType3_1, "divCheckTypeCount3_1");
        this.CheckTypeCount3(ret?.Data.checkTypeRiskMineType3_2, "divCheckTypeRiskCount3_2");
      },
    });
  };
  getBaseInfoData = (mineType) => {
    this.CheckCount1_1(this.state.ret.Data.checkMineType1_1);
    this.RiskCount1_2(this.state.ret.Data.riskMineType1_2, this.state.ColorShow);
    this.RiskCount1_22(this.state.ret.Data.riskMineType1_2, this.state.ColorShow);

    //动态处理数据
    var countDeal = []
    var countNotDeal = []
    var linePercent = []
    var month = (new Date()).getMonth() + 1//取当前月
    for (var i = 0; i < month; i++) {
      countDeal.push(this.state.ret.Data.riskDealMonth2_1.countDeal[i])
      countNotDeal.push(this.state.ret.Data.riskDealMonth2_1.countNotDeal[i])
      linePercent.push(this.state.ret.Data.riskDealMonth2_1.linePercent[i])
    }
    this.state.ret.Data.riskDealMonth2_1.countDeal = countDeal
    this.state.ret.Data.riskDealMonth2_1.countNotDeal = countNotDeal
    this.state.ret.Data.riskDealMonth2_1.linePercent = linePercent
    this.RiskDeal2_1(this.state.ret.Data.riskDealMonth2_1);
    //动态处理数据

    this.RiskTop2_2(this.state.ret.Data.riskTop2_2, this.state.ColorShow);
    this.CheckTypeCount3(this.state.ret.Data.checkTypeMineType3_1, "divCheckTypeCount3_1");
    this.CheckTypeCount3(this.state.ret.Data.checkTypeRiskMineType3_2, "divCheckTypeRiskCount3_2");
  };

  CheckCount1_1 = (Data) => {
    let divCheckCount1_1 = document.getElementById("divCheckCount1_1");
    if (divCheckCount1_1) {
      let myChart = echarts.init(divCheckCount1_1);
      myChart.setOption(
        {
          // title: {
          //   text: "生产单元",
          //   left: "center",
          // },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: Data.legendName,
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "12%",
            top: "10%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: Data.mineTypeName,
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "公司级",
              type: "bar",
              data: Data.checkCount[0],
              itemStyle: { color: this.state.ColorShow[0] },
              barWidth: 30,//横轴的柱状图宽度
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
              barWidth: 30
            },
            {
              name: "部门级",
              type: "bar",
              data: Data.checkCount[1],
              itemStyle: { color: this.state.ColorShow[1] },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              name: "车间级",
              type: "bar",
              data: Data.checkCount[2],
              itemStyle: { color: this.state.ColorShow[2] },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              name: "班组级",
              type: "bar",
              data: Data.checkCount[3],
              itemStyle: { color: this.state.ColorShow[3] },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
          ],
        },
        true
      );
    }
  };
  RiskCount1_2 = (Data, ColorShow) => {
    let divRiskCount1_2 = document.getElementById("divRiskCount1_2");
    if (divRiskCount1_2) {
      let myChart = echarts.init(divRiskCount1_2);
      myChart.setOption(
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: Data.legendName,
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              type: "bar",
              data: Data.riskCount,
              itemStyle: {
                color: function (params) {
                  return ColorShow[params.dataIndex]
                }
              },
              barWidth: 30,
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
          ],
        },
        true
      );
    }
  };
  RiskCount1_22 = (Data, ColorShow) => {
    var dataShow = []
    for (var i = 0; i < Data.legendName.length; i++) {
      dataShow.push({
        name: Data.legendName[i],
        value: Data.riskCount[i]
      })
    }

    let divRiskCount1_22 = document.getElementById("divRiskCount1_22");
    if (divRiskCount1_22) {
      let myChart = echarts.init(divRiskCount1_22);
      myChart.setOption(
        {
          tooltip: {
            trigger: "item",
            formatter: "{b} : ({d}%)",
          },
          legend: {
            left: "0%",
            bottom: "10%",
            data: Data.legend,
          },
          series: [
            {
              type: "pie",
              radius: '55%',
              center: ["50%", "45%"],
              data: dataShow,
              itemStyle: {
                color: function (params) {
                  return ColorShow[params.dataIndex]
                }
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                show: true, // 开启标签显示
                formatter: '{d}%', // 格式化标签文本，仅显示数值
              },
            },
          ],
        },
        true
      );
    }
  };
  RiskDeal2_1 = (Data) => {
    let divRiskDeal2_1 = document.getElementById("divRiskDeal2_1");
    if (divRiskDeal2_1) {
      let myChart = echarts.init(divRiskDeal2_1);

      myChart.setOption(
        {
          // title: {
          //   text: "区域(生产单元+等级)",
          //   left: "center",
          // },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (value) {
              debugger
              var tooltipShow = ''
              if (value.length > 0) {
                // tooltipShow += value[0].axisValueLabel + '<br/>'
                for (var i = 0; i < value.length; i++) {
                  if (value[i].componentSubType == "bar") {
                    tooltipShow += value[i].marker + value[i].seriesName + ":" + value[i].value + "<br/>"
                  } else {
                    tooltipShow += value[i].marker + value[i].seriesName + ":" + value[i].value + "%"
                  }
                }
              }
              return tooltipShow
            }
          },
          legend: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: Data.legendName,
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "12%",
            top: "10%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: Data.xAxisName,
            axisLabel: {
              interval: 0,
              rotate: 20,
              formatter: function (value) {
                return value
              }
            }
          },
          yAxis: [
            // type: "value",
            {
              name: '整改情况',
              type: 'value',
              // min: 0,
              // max: 100000,
              // axisLabel: {            // 坐标轴标签样式设置
              //   textStyle: { fontSize: 20 },
              //   formatter: '{value} 件',     // 给坐标轴标签加单位
              // },
              // nameTextStyle: { fontSize: 20 },
            }, {
              name: "完成率(%)",
              type: "value",
              min: 0,
              max: 70,
              position: "middle",// "right",
              formatter: "{value}%",
              min: 0,
              max: 100,
              axisLabel: {
                // textStyle: { fontSize: 20 },
                formatter: '{value} %',     // 给坐标轴标签加单位
              },
              splitLine: {     //网格线
                show: false
              }
            }
          ],
          series: [
            {
              name: "已整改",
              type: "bar",
              stack: "总量",
              label: {
                show: true,
                position: "insideRight",
              },
              data: Data.countDeal,
              itemStyle: { color: this.state.ColorShow[0] },
              barWidth: 30
            },
            {
              name: "未整改",
              type: "bar",
              stack: "总量",
              label: {
                show: true,
                position: "insideRight",
              },
              data: Data.countNotDeal,
              itemStyle: { color: this.state.ColorShow[1] },
            },
            {
              name: "整改率",
              type: "line",
              label: {
                show: true,
                position: "top",
                formatter: "{c}%"
              },
              lineStyle: {
                color: "#ffb122"
              },
              data: Data.linePercent,
              itemStyle: { color: this.state.ColorShow[2] },
              yAxisIndex: 1
            },
          ],
        },
        true
      );
    }
  };
  RiskTop2_2 = (Data, ColorShow) => {
    let divRiskTop2_2 = document.getElementById("divRiskTop2_2");
    if (divRiskTop2_2) {
      var count = Data.count
      let myChart = echarts.init(divRiskTop2_2);
      myChart.setOption(
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "12%",
            top: "10%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "value",
            },
          ],
          yAxis: [
            {
              type: "category",
              data: Data.yAxisName,
            },
          ],
          series: [
            {
              type: "bar",
              data: count,
              itemStyle: {
                color: function (params) {
                  return ColorShow[params.dataIndex]
                }
              },
              barWidth: 30,//横轴的柱状图宽度
              label: {
                normal: {
                  show: true,
                  // position: 'insideRight', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    // color: '#333', // 字体颜色
                  },
                },
              },
            },
          ],
        },
        true
      );
    }
  };
  // 检查类型  次数/隐患 统计
  CheckTypeCount3 = (Data, divid) => {
    let divShow = document.getElementById(divid);
    if (divShow) {
      let myChart = echarts.init(divShow);
      var series = []
      for (let i = 0; i < Data.legendName.length; i++) {
        series.push({
          name: Data.legendName[i],
          type: "bar",
          stack: "总量",
          label: {
            show: true,
            position: "insideRight",
          },
          data: Data.arrayCount[i],//.slice(0, 10),
          itemStyle: { color: this.state.ColorShow[i] },
          barWidth: 30
        })
      }

      myChart.setOption(
        {
          // title: {
          //   text: "风险类别(等级)",
          //   left: "center",
          // },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: Data.legendName,
          },
          grid: {
            left: "3%",
            right: "5%",
            bottom: "12%",
            top: "10%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: Data.xAxisName,//.slice(0, 10),
            axisLabel: {
              interval: 0,
              rotate: 20,
              formatter: function (value) {
                return value
              }
            }
          },
          yAxis: {
            type: "value",
          },
          series: series
        },
        true
      );
    }
  };

  CheckTypeRiskCount3_2 = (Data) => {
    let divCheckTypeRiskCount3_2 = document.getElementById("divCheckTypeRiskCount3_2");
    if (divCheckTypeRiskCount3_2) {

      let myChart = echarts.init(divCheckTypeRiskCount3_2);
      myChart.setOption(
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          legend: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: Data.legendName,
          },
          grid: {
            left: "3%",
            right: "5%",
            bottom: "12%",
            top: "10%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            data: Data.xAxisName,//.NAME.slice(0, 10),
            axisLabel: {
              interval: 0,
              rotate: 20,
              formatter: function (value) {
                return value
              }
            }
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "露天矿",
              type: "bar",
              stack: "总量",
              label: {
                show: true,
                position: "insideRight",
              },
              data: Data.arrayCount[0],//.Count1.slice(0, 10),
              itemStyle: { color: this.state.ColorShow[0] },
              barWidth: 30
            },
            {
              name: "选矿厂",
              type: "bar",
              stack: "总量",
              label: {
                show: true,
                position: "insideRight",
              },
              data: Data.arrayCount[1],//Count2.slice(0, 10),
              itemStyle: { color: this.state.ColorShow[1] },
            },
            {
              name: "尾矿库",
              type: "bar",
              stack: "总量",
              label: {
                show: true,
                position: "insideRight",
              },
              data: Data.arrayCount[2],//Count3.slice(0, 10),
              itemStyle: { color: this.state.ColorShow[2] },
            },
            {
              name: "职能部门",
              type: "bar",
              stack: "总量",
              label: {
                show: true,
                position: "insideRight",
              },
              data: Data.arrayCount[3],//Count4.slice(0, 10),
              itemStyle: { color: this.state.ColorShow[3] },
            },
          ],
        },
        true
      );
    }
  };

  //显示详情弹窗
  showDetailModal = (formCode) => {
    var titleTemp =
      this.state.mineType == 20
        ? "尾矿库"
        : this.state.mineType == 10
          ? "选矿厂"
          : "露天矿";
    if (formCode == "风险类别1") {
      titleTemp += "风险类别";
      this.chart25(this.state.ret.Data.CHARTLIST[1]);
      this.setState({ isShow2: true })
    } else if (formCode == "风险类别2") {
      titleTemp += "风险类别";
      this.chart21(this.state.ret.Data.RISKTYPELIST[0], "露天矿", "1", "1", "1", "1");
      this.chart22(this.state.ret.Data.RISKTYPELIST[1], "选矿厂", "1", "1", "1", "1");
      this.chart23(this.state.ret.Data.RISKTYPELIST[2], "尾矿库", "1", "1", "1", "1");
      this.chart24(this.state.ret.Data.RISKTYPELIST[3], "职能部门", "1", "1", "1", "1");
      this.setState({ isShow1: true })
    }
    else if (formCode == "生产单元") {
      this.setState({ isShow1: true })
      titleTemp += "生产单元";
      this.chart21(this.state.ret.Data.CHARTLIST[3], "露天矿", "1", "2", "3", "4");
      this.chart22(this.state.ret.Data.CHARTLIST[3], "选矿厂", "1", "2", "3", "4");
      this.chart23(this.state.ret.Data.CHARTLIST[3], "尾矿库", "1", "2", "3", "4");
      this.chart24(this.state.ret.Data.CHARTLIST[3], "职能部门", "1", "2", "3", "4");
    } else if (formCode == "层级") {
      this.setState({ isShow1: true })
      titleTemp += "层级";
      this.chart21(this.state.ret.Data.CHARTLIST[0], "公司", "1", "2", "3", "4");
      this.chart22(this.state.ret.Data.CHARTLIST[0], "部门", "1", "2", "3", "4");
      this.chart23(this.state.ret.Data.CHARTLIST[0], "车间", "1", "2", "3", "4");
      this.chart24(this.state.ret.Data.CHARTLIST[0], "班组", "1", "2", "3", "4");
    } else if (formCode == "责任单位") {
      this.setState({ isShow1: true })
      titleTemp += "责任单位";
      this.chart21(this.state.ret.Data.TEAMLIST[0], "露天矿", "1", "1", "1", "1");
      this.chart22(this.state.ret.Data.TEAMLIST[1], "选矿厂", "1", "1", "1", "1");
      this.chart23(this.state.ret.Data.TEAMLIST[2], "尾矿库", "1", "1", "1", "1");
      this.chart24(this.state.ret.Data.TEAMLIST[3], "职能部门", "1", "1", "1", "1");
    } else if (formCode == "区域") {
      this.setState({ isShow1: true })
      titleTemp += "区域";
      this.chart21(this.state.ret.Data.AREALIST[0], "露天矿", "1", "1", "1", "1");
      this.chart22(this.state.ret.Data.AREALIST[1], "选矿厂", "1", "1", "1", "1");
      this.chart23(this.state.ret.Data.AREALIST[2], "尾矿库", "1", "1", "1", "1");
      this.chart24(this.state.ret.Data.AREALIST[3], "职能部门", "1", "1", "1", "1");
    }

    const newtmpData = {
      data: {
        id: guid(),
        mineType: this.state.mineType,
        onCancel: this.handleCancel,
        homeReload: true,
      },
      formCode: formCode,
    };
    this.setState({ tmpData: newtmpData }, () => {
      var detailForm = {
        formCode: formCode,
        title: titleTemp,
      };
      this.setState({
        detailForm: detailForm,
      });
    });
  };
  //详情弹窗关闭（隐藏）
  detailFormClose = () => {
    var detailForm = {
      formCode: "",
      title: "",
    };
    this.setState({
      isShow1: false,
      isShow2: false,
      detailForm: detailForm,
    });
  };

  render() {
    return (
      <div
        style={{
          backgroundColor: "#fff",
          top: "0",
          bottom: "0",
          left: "0",
          right: "0",
          margin: "auto",
          // borderStyle: "solid",
          // borderColor: "#ccc",
          // borderWidth: "1px",
        }}
      >
        <div style={{ display: "inline-block" }}>
          <Modal
            visible={this.state.isShow1}
            title={this.state.detailForm.title}
            maskClosable={false}
            closeModal={this.detailFormClose}
            onCancel={this.detailFormClose}
            footer={null}
            width="1300px"
            getContainer={false}
          >
            <Row gutter={12} style={{ marginTop: "5px" }}>
              <Col span={12}>
                <div id="chart21" style={{ width: "500px", height: "300px", flex: 1 }}></div>
                <div id="chart23" style={{ width: "500px", height: "300px", flex: 1 }}></div>
              </Col>
              <Col span={12}>
                <div id="chart22" style={{ width: "500px", height: "300px", flex: 1 }}></div>
                <div id="chart24" style={{ width: "500px", height: "300px", flex: 1 }}></div>
              </Col>
            </Row>
          </Modal>
          <Modal
            visible={this.state.isShow2}
            title={this.state.detailForm.title}
            maskClosable={false}
            closeModal={this.detailFormClose}
            onCancel={this.detailFormClose}
            footer={null}
            width="1300px"
            getContainer={false}
          >
            <div id="chart25" style={{ width: "1200px", height: "700px", flex: 1 }}></div>
          </Modal>
        </div>

        {/* 第一行 */}
        <Row gutter={12} style={{ marginTop: "5px" }}>
          <Col span={1}></Col>
          <Col span={11} className="risk-model-col" style={{ padding: 0 }}>
            <div className="home-always-title">
              <div className="home-always-left">
                <div className="home-always-badge"></div>
                <div className="home-always-name">年度安全检查统计</div>
              </div>
              <div onClick={() => this.showDetailModal("年度安全检查统计")}>
                <IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
              </div>
            </div>
            <div id="divCheckCount1_1" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          <Col span={1}></Col>

          <Col span={11} className="risk-model-col" style={{ padding: 0 }}>
            <div className="home-always-title">
              <div className="home-always-left">
                <div className="home-always-badge"></div>
                <div className="home-always-name">年度隐患数量统计</div>
              </div>
              <div onClick={() => this.showDetailModal("年度隐患数量统计")}>
                <IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
              </div>
            </div>
            <div id="divRiskCount1_2" style={{ width: "45%", height: "330px", float: "left" }}></div>
            <div id="divRiskCount1_22" style={{ width: "45%", height: "330px", float: "left" }}></div>
          </Col>
          <Col span={1}></Col>
        </Row>

        {/* 第二行 */}
        <Row gutter={12} style={{ marginTop: "30px" }}>
          <Col span={1}></Col>
          <Col span={11} className="risk-model-col" style={{ padding: 0 }}>
            <div className="home-always-title">
              <div className="home-always-left">
                <div className="home-always-badge"></div>
                <div className="home-always-name">隐患整改情况</div>
              </div>
              <div onClick={() => this.showDetailModal("隐患整改情况")}>
                <IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
              </div>
            </div>
            <div id="divRiskDeal2_1" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          <Col span={1}></Col>
          <Col span={11} className="risk-model-col" style={{ padding: 0 }}>
            <div className="home-always-title">
              <div className="home-always-left">
                <div className="home-always-badge"></div>
                <div className="home-always-name">隐患top6</div>
              </div>
              <div onClick={() => this.showDetailModal("隐患top6")}>
                <IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
              </div>
            </div>
            <div className="risk-chart" style={{ height: "330px" }}>
              <div id="divRiskTop2_2" style={{ width: "100%", flex: 1 }}></div>
            </div>
          </Col>
          <Col span={1}></Col>
        </Row>

        {/* 第三行 */}
        <Row gutter={12} style={{ marginTop: "30px" }}>
          <Col span={1}></Col>
          <Col span={11} className="risk-model-col" style={{ padding: 0 }}>
            <div className="home-always-title">
              <div className="home-always-left">
                <div className="home-always-badge"></div>
                <div className="home-always-name">检查类型次数统计</div>
              </div>
              <div onClick={() => this.showDetailModal("检查类型次数统计")}>
                <IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
              </div>
            </div>
            <div className="risk-chart" style={{ height: "330px" }}>
              <div id="divCheckTypeCount3_1" style={{ width: "100%", flex: 1 }}></div>
            </div>
          </Col>
          <Col span={1}></Col>
          <Col span={11} className="risk-model-col" style={{ padding: 0 }}>
            <div className="home-always-title">
              <div className="home-always-left">
                <div className="home-always-badge"></div>
                <div className="home-always-name">检查类型隐患统计</div>
              </div>
              <div onClick={() => this.showDetailModal("检查类型隐患统计")}>
                <IconFont type="icon-24gl-expand2" className="home-always-icon"></IconFont>
              </div>
            </div>
            <div className="risk-chart" style={{ height: "330px" }}>
              <div id="divCheckTypeRiskCount3_2" style={{ width: "100%", flex: 1 }}></div>
            </div>
          </Col>
          <Col span={1}></Col>
        </Row>
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI056Performance);