mh-sms-web/src/components/CustomPages/BI/BI056Performance.js

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 FormPage from '../../../components/FormPage'

class BI056Performance extends React.Component {
  constructor(props) {
    super(props);
    var barWidth = 30
    var windowWith = window.innerWidth;
    if (windowWith <= 1250) {
      barWidth = 10
    } else if (windowWith >= 2300) {
      barWidth = 30
    } else {
      barWidth = 20
    }

    this.state = {
      ColorShow: ["#c02e30", "#f7aa52", "#fbe06a", "#5185f3", "#EF9494", "#51b5f3"],
      dtStart: null,//开始时间
      dtEnd: null,//结束时间
      mineType: 0,//生产单元
      barWidth: barWidth,
      detailForm: {
        formCode: "",
        title: "",
        isShow: false,
        dilgWith: "90%"
      },
      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.getBaseInfoDataOnline();

    // //比如账号 以XTC 开头采用此静态数据
    this.getBaseInfoData();
  }

  //获取数据
  getBaseInfoDataOnline = (mineType) => {

    const json = initFilter(this.props.login.OrgId);
    extendOrder(json, "CREATE_TIME", 1);
    json.Parameter1 = mineType;
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BISafe/GetBI056Main",
      payload: json,
      onlyData: false,
      onComplete: (ret) => {
        if (ret && ret.IsSuccessful) {
          var checkMineType1_1 = {
            mineTypeName: ret.Data.lisMineTypeOrder,
            checkCount: ret.Data.Count1_1,
            legendName: ret.Data.lisLevelOrder
          }

          var riskMineType1_2 = {
            legendName: ret.Data.lisMineTypeOrder,
            riskCount: ret.Data.listRiskMineCount1_2,
          }

          var riskDealMonth2_1 = {
            legendName: this.state.Data.riskDealMonth2_1.legendName,
            xAxisName: this.state.Data.riskDealMonth2_1.xAxisName,//, ret.Data.listMonth,
            countDeal: ret.Data.listFinish2_1,
            countNotDeal: ret.Data.listNotFinish2_1,
            linePercent: ret.Data.listFinish2_1Percent,
          }

          var riskTop2_2 = {
            yAxisName: ret.Data.ListDescreption2_2,
            count: ret.Data.Count2_2,
          }

          var checkTypeMineType3_1 = {
            legendName: ret.Data.lisMineTypeOrder,
            xAxisName: ret.Data.lisCheckTypeName,
            arrayCount: ret.Data.Count3_1,
          }

          var checkTypeRiskMineType3_2 = {
            legendName: ret.Data.lisMineTypeOrder,
            xAxisName: ret.Data.lisCheckTypeName,
            arrayCount: ret.Data.Count3_2,
          }

          var lineData = {
            checkMineType1_1: checkMineType1_1,
            riskMineType1_2: riskMineType1_2,
            riskDealMonth2_1: riskDealMonth2_1,
            riskTop2_2: riskTop2_2,
            checkTypeMineType3_1: checkTypeMineType3_1,
            checkTypeRiskMineType3_2: checkTypeRiskMineType3_2
          }
          this.setState({
            Data: lineData
          })

          this.CheckCount1_1(this.state.Data.checkMineType1_1);
          this.RiskCount1_2(this.state.Data.riskMineType1_2, this.state.ColorShow);
          this.RiskCount1_22(this.state.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.Data.riskDealMonth2_1.countDeal[i])
          //   countNotDeal.push(this.state.Data.riskDealMonth2_1.countNotDeal[i])
          //   linePercent.push(this.state.Data.riskDealMonth2_1.linePercent[i])
          // }
          // this.state.Data.riskDealMonth2_1.countDeal = countDeal
          // this.state.Data.riskDealMonth2_1.countNotDeal = countNotDeal
          // this.state.Data.riskDealMonth2_1.linePercent = linePercent

          this.RiskDeal2_1(this.state.Data.riskDealMonth2_1);
          //动态处理数据

          this.RiskTop2_2(this.state.Data.riskTop2_2, this.state.ColorShow);
          this.CheckTypeCount3(this.state.Data.checkTypeMineType3_1, "divCheckTypeCount3_1");
          this.CheckTypeCount3(this.state.Data.checkTypeRiskMineType3_2, "divCheckTypeRiskCount3_2");
        } else {
          message.error("获取信息失败，请刷新后再试！");
        }
      },
    });
  };

  getBaseInfoData = (mineType) => {
    this.CheckCount1_1(this.state.Data.checkMineType1_1);
    this.RiskCount1_2(this.state.Data.riskMineType1_2, this.state.ColorShow);
    this.RiskCount1_22(this.state.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.Data.riskDealMonth2_1.countDeal[i])
      countNotDeal.push(this.state.Data.riskDealMonth2_1.countNotDeal[i])
      linePercent.push(this.state.Data.riskDealMonth2_1.linePercent[i])
    }
    this.state.Data.riskDealMonth2_1.countDeal = countDeal
    this.state.Data.riskDealMonth2_1.countNotDeal = countNotDeal
    this.state.Data.riskDealMonth2_1.linePercent = linePercent
    this.RiskDeal2_1(this.state.Data.riskDealMonth2_1);
    //动态处理数据

    this.RiskTop2_2(this.state.Data.riskTop2_2, this.state.ColorShow);
    this.CheckTypeCount3(this.state.Data.checkTypeMineType3_1, "divCheckTypeCount3_1");
    this.CheckTypeCount3(this.state.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: this.state.barWidth,// 30
            },
            {
              name: "部门级",
              type: "bar",
              data: Data.checkCount[1],
              itemStyle: { color: this.state.ColorShow[1] },
              barWidth: this.state.barWidth,// 30,//横轴的柱状图宽度
              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] },
              barWidth: this.state.barWidth,// 30,//横轴的柱状图宽度
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              name: "班组级",
              type: "bar",
              data: Data.checkCount[3],
              barWidth: this.state.barWidth,//  30,//横轴的柱状图宽度
              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: this.state.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) {
              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: this.state.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}%",
                color: this.state.ColorShow[3]
              },
              lineStyle: {
                color: this.state.ColorShow[2],// "#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: this.state.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: this.state.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: this.state.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
      );
    }
  };

  //显示详情弹窗   参考 BS064ShowPrint
  showDetailModal = (formCode) => {
    var barWidth = 30

    // var windowWith = window.innerWidth;
    // if (windowWith <= 1250) {
    //   barWidth = 5
    // } else if (windowWith >= 2300) {
    //   barWidth = 15
    // }else{
    //   barWidth = 10
    // }

    var dilgWith = "90%"
    var titleTemp = ""
    switch (formCode) {
      case 'BI056_DILG1_1': titleTemp = "安全检查次数季度统计"
        dilgWith = "80%"
        break;
      case 'BI056_DILG1_2': titleTemp = "年度隐患数量统计"
        dilgWith = "75%"
        break;
      case 'BI056_DILG2_1': titleTemp = "隐患整改情况"
        break;
      case 'BI056_DILG2_2': titleTemp = "Top隐患"
        break;
      case 'BI056_DILG3_1': titleTemp = "检查类型次数统计"
        break;
      case 'BI056_DILG3_2': titleTemp = "检查类型隐患统计"
        break;
    }
    // debugger
    const newtmpData = {
      data: {
        id: guid(),
        mineType: this.state.mineType,
        dtStart: this.state.dtStart,
        dtEnd: this.state.dtEnd,
        homeReload: true,
        barWidth: barWidth,
        ColorShow: this.state.ColorShow
      },
      formCode: formCode,
    };
    this.setState({ tmpData: newtmpData }, () => {
      var detailForm = {
        title: titleTemp,
        isShow: true,
        dilgWith: dilgWith,
        // ColorShow: this.state.ColorShow
      };
      this.setState({
        detailForm: detailForm,
      });
    });
  };

  //详情弹窗关闭（隐藏）
  detailFormClose = () => {
    var detailForm = {
      formCode: "",
      title: "",
      isShow: false
    };
    this.setState({
      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.detailForm.isShow}
            title={this.state.detailForm.title}
            closeModal={this.detailFormClose}
            onCancel={this.detailFormClose}
            maskClosable={false}
            getContainer={false}
            footer={null}
            width={this.state.detailForm.dilgWith}
          //width="95%"
          >
            <FormPage {...this.state.tmpData} />
          </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("BI056_DILG1_1")}>
                <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={10} 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("BI056_DILG1_2")}>
                <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("BI056_DILG2_1")}>
                <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={10} 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("BI056_DILG2_2")}>
                <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("BI056_DILG3_1")}>
                <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={10} 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("BI056_DILG3_2")}>
                <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);