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

import React, { useState, useEffect, useRef, Component } from "react";
import { connect } from "dva";
import {
  initFilter,
  extendOrder,
  guid,
} from "../../../utils/common";
import { Table, Row, Col, Button, Select, DatePicker, message, Modal, } from "antd";
import echarts from "echarts";
import moment from "moment";
import IconFont from "../../../utils/iconFont";
class BI013RiskAnalysisModel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      level1Color: "#c02e30",
      level2Color: "#f7aa52",
      level3Color: "#fbe06a",
      level4Color: "#5185f3",
      detailForm: {
        isShow: false,
        formCode: "",
        title: "",
      },
      ret: {
        "IsSuccessful": true, "Data": {
          "DATECOUNTS": [
            { "DATE": "2024-01-31 23:59:59", "COUNT": 50, "TYPE": 1 }, { "DATE": "2024-01-31 23:59:59", "COUNT": 414, "TYPE": 0 },
            { "DATE": "2024-02-29 23:59:59", "COUNT": 62, "TYPE": 1 }, { "DATE": "2024-02-29 23:59:59", "COUNT": 514, "TYPE": 0 },
            { "DATE": "2024-03-31 23:59:59", "COUNT": 62, "TYPE": 1 }, { "DATE": "2024-03-31 23:59:59", "COUNT": 614, "TYPE": 0 },
            { "DATE": "2024-04-30 23:59:59", "COUNT": 70, "TYPE": 1 }, { "DATE": "2024-04-30 23:59:59", "COUNT": 714, "TYPE": 0 },
            { "DATE": "2024-05-31 23:59:59", "COUNT": 80, "TYPE": 1 }, { "DATE": "2024-05-31 23:59:59", "COUNT": 814, "TYPE": 0 },
            { "DATE": "2024-06-30 23:59:59", "COUNT": 80, "TYPE": 1 }, { "DATE": "2024-06-30 23:59:59", "COUNT": 914, "TYPE": 0 },
            { "DATE": "2024-07-31 23:59:59", "COUNT": 94, "TYPE": 1 }, { "DATE": "2024-07-31 23:59:59", "COUNT": 954, "TYPE": 0 },
            { "DATE": "2024-08-31 23:59:59", "COUNT": 102, "TYPE": 1 }, { "DATE": "2024-08-31 23:59:59", "COUNT": 984, "TYPE": 0 },
            { "DATE": "2024-09-30 23:59:59", "COUNT": 102, "TYPE": 1 }, { "DATE": "2024-09-30 23:59:59", "COUNT": 1014, "TYPE": 0 },
            { "DATE": "2024-10-31 23:59:59", "COUNT": 112, "TYPE": 1 }, { "DATE": "2024-10-31 23:59:59", "COUNT": 1024, "TYPE": 0 },
            { "DATE": "2024-11-30 23:59:59", "COUNT": 113, "TYPE": 1 }, { "DATE": "2024-11-30 23:59:59", "COUNT": 1114, "TYPE": 0 },
            { "DATE": "2024-12-31 23:59:59", "COUNT": 116, "TYPE": 1 }, { "DATE": "2024-12-31 23:59:59", "COUNT": 1154, "TYPE": 0 },
          ],
          "CHART11": [{ "name": "一级", "value": 39 }, { "name": "二级", "value": 82 }, { "name": "三级", "value": 381 }, { "name": "四级", "value": 812 }],
          "CHARTLIST": [
            { "NAME": ["选矿厂", "尾矿库", "露天矿"], "LEVEL1": [137, 190, 168], "LEVEL2": [251, 231, 242], "LEVEL3": [365, 346, 370], "LEVEL4": [437, 497, 478] },

            { "NAME": ["容器爆炸", "淹溺", "物体打击", "高处坠落", "火灾", "起重伤害", "其他爆炸", "中毒和窒息", "放炮", "冒顶片帮", "坍塌", "车辆伤害", "触电", "其他伤害", "机械伤害", "灼烫", "火药爆炸"], "LEVEL1": [398, 395, 389, 372, 356, 343, 328, 315, 299, 286, 272, 261, 247, 235, 223, 199, 184], "LEVEL2": [137, 145, 152, 161, 173, 186, 191, 203, 218, 229, 241, 260, 277, 293, 306, 321, 375], "LEVEL3": [37, 56, 72, 89, 104, 127, 143, 158, 175, 191, 206, 227, 251, 273, 294, 320, 385], "LEVEL4": [25, 37, 50, 62, 75, 88, 101, 119, 133, 147, 161, 178, 194, 211, 230, 255, 392] },

            { "NAME": ["生产一班", "选矿部", "机电设备管理办公室", "矿山部", "财务部", "办公室", "非金属资源部筹备组", "企业管理部", "技术管理部", "营销部"], "LEVEL1": [35, 121, 227, 330, 97, 153, 178, 212, 25, 301], "LEVEL2": [39, 151, 202, 322, 45, 187, 239, 308, 112, 376], "LEVEL3": [56, 109, 273, 381, 74, 135, 215, 296, 123, 335], "LEVEL4": [23, 168, 250, 390, 62, 117, 244, 313, 89, 367] },

            { "NAME": ["部门", "车间", "班组", "公司"], "LEVEL1": [75, 119, 25, 392], "LEVEL2": [307, 102, 235, 18], "LEVEL3": [343, 121, 396, 78], "LEVEL4": [215, 331, 37, 292] },

            { "NAME": ["容器爆炸", "淹溺", "物体打击", "高处坠落", "火灾", "起重伤害", "其他爆炸", "中毒和窒息", "放炮", "冒顶片帮", "坍塌", "车辆伤害", "触电", "其他伤害", "机械伤害", "灼烫", "火药爆炸"], "LEVEL1": [95, 122, 217, 78, 254, 153, 26, 192, 239, 170, 103, 145, 278, 212, 55, 189, 287], "LEVEL2": [221, 135, 110, 243, 150, 199, 273, 148, 17, 290, 228, 201, 184, 92, 165, 106, 133], "LEVEL3": [300, 23, 187, 86, 111, 250, 248, 137, 157, 260, 298, 53, 100, 129, 175, 142, 285], "LEVEL4": [204, 162, 223, 291, 197, 109, 42, 274, 171, 118, 138, 232, 252, 167, 255, 124, 2] },

            { "NAME": ["部门", "车间", "班组", "公司"], "LEVEL1": [153, 124, 178, 190], "LEVEL2": [105, 132, 27, 185], "LEVEL3": [200, 14, 56, 139], "LEVEL4": [37, 176, 150, 120] },

            { "NAME": ["生产一班", "选矿部", "机电设备管理办公室", "矿山部", "财务部", "办公室", "非金属资源部筹备组", "企业管理部", "技术管理部", "营销部"], "LEVEL1": [187, 152, 113, 199, 75, 141, 102, 34, 160, 128], "LEVEL2": [135, 194, 86, 162, 107, 43, 173, 155, 118, 181], "LEVEL3": [110, 131, 197, 27, 92, 150, 170, 180, 12, 178], "LEVEL4": [56, 183, 100, 125, 190, 171, 89, 140, 161, 137] },

            { "NAME": ["破碎车间-粗碎单元", '机电设备管理科作业区', '高压配电室', '电焊作业区', '采场', '破碎车间', '尾矿库截洪单元', '尾矿库库坝单元', '磨重车间-细粒选别单元', '钨细泥回收车间-排尾单元'], "LEVEL1": [320, 302, 301, 334, 320, 302, 301, 33, 67, 89], "LEVEL2": [120, 132, 101, 134, 334, 320, 302, 301, 33, 67], "LEVEL3": [220, 182, 191, 234, 334, 320, 302, 301, 33, 67], "LEVEL4": [150, 212, 201, 154, 334, 320, 302, 301, 33, 67] }
          ]
        }, "TotalCount": 0, "MessageType": 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.chart4(ret?.Data.DATECOUNTS);
        this.chart11(ret?.Data.CHART11);
        this.chart12(ret?.Data.CHARTLIST[0]);
        this.chart13(ret?.Data.CHARTLIST[1]);
        this.chart14(ret?.Data.CHARTLIST[2]);
        this.chart15(ret?.Data.CHARTLIST[3]);

        this.chart16(ret?.Data.CHARTLIST[4]);
        this.chart17(ret?.Data.CHARTLIST[5]);
        this.chart18(ret?.Data.CHARTLIST[6]);
        this.chart19(ret?.Data.CHARTLIST[7]);
      },
    });
  };
  getBaseInfoData = (mineType) => {
    this.chart4(this.state.ret.Data.DATECOUNTS);
    this.chart11(this.state.ret.Data.CHART11);
    this.chart12(this.state.ret.Data.CHARTLIST[0]);
    this.chart13(this.state.ret.Data.CHARTLIST[1]);
    this.chart14(this.state.ret.Data.CHARTLIST[2]);
    this.chart15(this.state.ret.Data.CHARTLIST[3]);

    this.chart16(this.state.ret.Data.CHARTLIST[4]);
    this.chart17(this.state.ret.Data.CHARTLIST[5]);
    this.chart18(this.state.ret.Data.CHARTLIST[6]);
    this.chart19(this.state.ret.Data.CHARTLIST[7]);
  };
  chart4 = (data) => {
    let riskArr = [];
    let hazardArr = [];
    let dates = [];
    for (let i = 0; i < data.length; i++) {
      if (data[i].TYPE == 0) {
        riskArr.push(data[i].COUNT);
        dates.push(moment(data[i].DATE).format("MM"));
      } else {
        hazardArr.push(data[i].COUNT);
      }
    }
    let currMonth = dates.length;
    for (let i = 1; i < 13 - currMonth; i++) {
      dates.push(
        moment(dates[dates.length]).add(i, "months").format("MM")
      );
    }
    let chart4s = document.getElementById("chart4");
    if (chart4s) {
      let myChart = echarts.init(chart4s);
      myChart.setOption({
        color: ["#72b85b", "#f6841a", "#cc0404"],
        grid: {
          left: "5%",
          right: "5%",
        },
        legend: {
          bottom: "0px",
        },
        title: {
          text: "月度风险辨识统计走势",
          left: "center",
          top: "2%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: {
          type: "category",
          data: dates,
          axisLabel: {
            showMaxLabel: true,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "危险源/风险库",
            data: riskArr,
            type: "line",
            smooth: true,
          },
          {
            name: "职业危害库",
            data: hazardArr,
            type: "line",
            smooth: true,
          },
        ],
      }, true);
    }
  };
  chart11 = (Data) => {
    let that = this;
    let chart11s = document.getElementById("chart11");
    Data.forEach(item => {
      if (item.name == "一级") {
        item.itemStyle = { color: this.state.level1Color };
      }
      if (item.name == "二级") {
        item.itemStyle = { color: this.state.level2Color };
      }
      if (item.name == "三级") {
        item.itemStyle = { color: this.state.level3Color };
      }
      if (item.name == "四级") {
        item.itemStyle = { color: this.state.level4Color };
      }
    })
    if (chart11s) {
      let myChart = echarts.init(chart11s);
      myChart.setOption({
        title: {
          text: '风险等级',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          orient: "vartical",
          x: "right",
          top: "40%",
          bottom: "0%",
          data: ['一级', '二级', '三级', '四级'],
          formatter: function (name) {
            let singleData = Data.filter(function (item) {
              return item.name == name;
            });
            let countAll = 0;
            Data.map((item) => {
              countAll = countAll + item.value;
            });

            return (
              name +
              "   |   " +
              singleData[0].value +
              "   |   " +
              Number((singleData[0].value / countAll) * 100).toFixed(2) +
              "%"
            );
          },
        },
        series: [
          {
            type: 'pie',
            radius: '65%',
            center: ['45%', '50%'],
            data: Data,
            label: {
              show: false,
            },
          }
        ]
      }, true);
      // 添加点击事件监听器
      myChart.on('click', function (params) {
        // params 参数包含了点击事件的相关信息
        // 如：params.componentType 可能是 'series'
        // params.seriesIndex 系列的索引（在只有一个系列的情况下通常是0）
        // params.dataIndex 扇区的数据索引
        // params.name 点击的扇区名称
        // params.value 点击的扇区对应的数值


        // 你可以根据params执行任何你想做的操作，例如：
        if (params.componentType === 'series') {
          if (params.name == '一级') {
            let newData = that.state.ret.Data.CHARTLIST[1];
            that.subtractRandomNotLessThanSelf(newData);
            that.chart13(newData)
          } else if (params.name == '二级') {
            that.subtractRandomNotLessThanSelf(that.state.ret.Data.CHARTLIST[1]);
          } else if (params.name == '三级') {
            that.subtractRandomNotLessThanSelf(that.state.ret.Data.CHARTLIST[1]);
          } else if (params.name == '四级') {
            that.subtractRandomNotLessThanSelf(that.state.ret.Data.CHARTLIST[1]);
          }
        }
      });
    }
  };
  chart12 = (Data) => {
    let chart12s = document.getElementById("chart12");
    if (chart12s) {
      let myChart = echarts.init(chart12s);
      myChart.setOption(
        {
          title: {
            text: '生产单元',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            top: '40%',
            orient: 'vertical',
            x: "right",
            data: ['一级', '二级', '三级', '四级']
          },
          grid: {
            left: '3%',
            right: '12%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: Data.NAME
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '一级',
              type: 'bar',
              data: Data.LEVEL1,
              itemStyle: { color: this.state.level1Color }
            },
            {
              name: '二级',
              type: 'bar',
              data: Data.LEVEL2,
              itemStyle: { color: this.state.level2Color }
            },
            {
              name: '三级',
              type: 'bar',
              data: Data.LEVEL3,
              itemStyle: { color: this.state.level3Color }
            },
            {
              name: '四级',
              type: 'bar',
              data: Data.LEVEL4,
              itemStyle: { color: this.state.level4Color }
            }
          ]
        }, true);
    }
  };
  chart13 = (Data) => {
    let chart13s = document.getElementById("chart13");
    if (chart13s) {
      let myChart = echarts.init(chart13s);
      myChart.setOption(
        {
          title: {
            text: '风险类别(等级)',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            top: '40%',
            orient: 'vertical',
            x: "right",
            data: ['一级', '二级', '三级', '四级']
          },
          grid: {
            left: '3%',
            right: '12%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: Data.NAME.slice(0, 10)
          },
          series: [
            {
              name: '一级',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: Data.LEVEL1.slice(0, 10)
              ,
              itemStyle: { color: this.state.level1Color }
            },
            {
              name: '二级',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: Data.LEVEL2.slice(0, 10),
              itemStyle: { color: this.state.level2Color }
            },
            {
              name: '三级',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: Data.LEVEL3.slice(0, 10),
              itemStyle: { color: this.state.level3Color }
            },
            {
              name: '四级',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: Data.LEVEL4.slice(0, 10),
              itemStyle: { color: this.state.level4Color }
            },
          ]
        }, true);
    }
  };
  chart14 = (Data) => {
    let chart14s = document.getElementById("chart14");
    if (chart14s) {
      let myChart = echarts.init(chart14s);
      myChart.setOption(
        {
          title: {
            text: '责任单位(等级)',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            top: '40%',
            orient: 'vertical',
            x: "right",
            data: ['一级', '二级', '三级', '四级']
          },
          grid: {
            left: '3%',
            right: '12%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: Data.NAME,
              axisLabel: {
                interval: 0,
                rotate: 40,
                formatter: function (value) {
                  return value
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [

            {
              name: '一级',
              type: 'bar',
              data: Data.LEVEL1,
              itemStyle: { color: this.state.level1Color }
            },
            {
              name: '二级',
              type: 'bar',
              data: Data.LEVEL2,
              itemStyle: { color: this.state.level2Color }
            },
            {
              name: '三级',
              type: 'bar',
              data: Data.LEVEL3,
              itemStyle: { color: this.state.level3Color }
            },
            {
              name: '四级',
              type: 'bar',
              data: Data.LEVEL4,
              itemStyle: { color: this.state.level4Color }
            }
          ]
        }, true);
    }
  };
  chart15 = (Data) => {
    let chart15s = document.getElementById("chart15");
    if (chart15s) {
      let myChart = echarts.init(chart15s);
      myChart.setOption(
        {
          title: {
            text: '层级（等级）',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            top: '40%',
            orient: 'vertical',
            x: "right",
            data: ['一级', '二级', '三级', '四级']
          },
          grid: {
            left: '3%',
            right: '12%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: Data.NAME
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [

            {
              name: '一级',
              type: 'bar',
              data: Data.LEVEL1,
              itemStyle: { color: this.state.level1Color }
            },
            {
              name: '二级',
              type: 'bar',
              data: Data.LEVEL2,
              itemStyle: { color: this.state.level2Color }
            },
            {
              name: '三级',
              type: 'bar',
              data: Data.LEVEL3,
              itemStyle: { color: this.state.level3Color }
            },
            {
              name: '四级',
              type: 'bar',
              data: Data.LEVEL4,
              itemStyle: { color: this.state.level4Color }
            }
          ]
        }, true);
    }
  };
  chart16 = (Data) => {
    let chart16s = document.getElementById("chart16");
    if (chart16s) {
      let myChart = echarts.init(chart16s);
      myChart.setOption(
        {
          title: {
            text: '风险类别(生产单元+等级)',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            top: '40%',
            orient: 'vertical',
            x: "right",
            data: ['一级', '二级', '三级', '四级']
          },
          grid: {
            left: '3%',
            right: '12%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: Data.NAME
          },
          series: [
            {
              name: '一级',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: Data.LEVEL1,
              itemStyle: { color: this.state.level1Color }
            },
            {
              name: '二级',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: Data.LEVEL2,
              itemStyle: { color: this.state.level2Color }
            },
            {
              name: '三级',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: Data.LEVEL3,
              itemStyle: { color: this.state.level3Color }
            },
            {
              name: '四级',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: Data.LEVEL4,
              itemStyle: { color: this.state.level4Color }
            },
          ]
        }, true);
    }
  };
  chart17 = (Data) => {
    let chart17s = document.getElementById("chart17");
    if (chart17s) {
      let myChart = echarts.init(chart17s);
      myChart.setOption(
        {
          title: {
            text: '层级（生产单元+等级）',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            top: '40%',
            orient: 'vertical',
            x: "right",
            data: ['一级', '二级', '三级', '四级']
          },
          grid: {
            left: '3%',
            right: '12%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: Data.NAME
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [

            {
              name: '一级',
              type: 'bar',
              data: Data.LEVEL1,
              itemStyle: { color: this.state.level1Color }
            },
            {
              name: '二级',
              type: 'bar',
              data: Data.LEVEL2,
              itemStyle: { color: this.state.level2Color }
            },
            {
              name: '三级',
              type: 'bar',
              data: Data.LEVEL3,
              itemStyle: { color: this.state.level3Color }
            },
            {
              name: '四级',
              type: 'bar',
              data: Data.LEVEL4,
              itemStyle: { color: this.state.level4Color }
            }
          ]
        }, true);
    }
  };
  chart18 = (Data) => {
    let chart18s = document.getElementById("chart18");
    if (chart18s) {
      let myChart = echarts.init(chart18s);
      myChart.setOption(
        {
          title: {
            text: '责任单位(等级)',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            top: '40%',
            orient: 'vertical',
            x: "right",
            data: ['一级', '二级', '三级', '四级']
          },
          grid: {
            left: '3%',
            right: '12%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: Data.NAME,
              axisLabel: {
                interval: 0,
                rotate: 40,
                formatter: function (value) {
                  return value
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [

            {
              name: '一级',
              type: 'bar',
              data: Data.LEVEL1,
              itemStyle: { color: this.state.level1Color }
            },
            {
              name: '二级',
              type: 'bar',
              data: Data.LEVEL2,
              itemStyle: { color: this.state.level2Color }
            },
            {
              name: '三级',
              type: 'bar',
              data: Data.LEVEL3,
              itemStyle: { color: this.state.level3Color }
            },
            {
              name: '四级',
              type: 'bar',
              data: Data.LEVEL4,
              itemStyle: { color: this.state.level4Color }
            }
          ]
        }, true);
    }
  };
  chart19 = (Data) => {
    let chart19s = document.getElementById("chart19");
    if (chart19s) {
      let myChart = echarts.init(chart19s);
      myChart.setOption(
        {
          title: {
            text: '区域(生产单元+等级)',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            top: '40%',
            orient: 'vertical',
            x: "right",
            data: ['一级', '二级', '三级', '四级']
          },
          grid: {
            left: '3%',
            right: '12%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: Data.NAME
          },
          series: [
            {
              name: '一级',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: Data.LEVEL1,
              itemStyle: { color: this.state.level1Color }
            },
            {
              name: '二级',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: Data.LEVEL2,
              itemStyle: { color: this.state.level2Color }
            },
            {
              name: '三级',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: Data.LEVEL3,
              itemStyle: { color: this.state.level3Color }
            },
            {
              name: '四级',
              type: 'bar',
              stack: '总量',
              label: {
                show: true,
                position: 'insideRight'
              },
              data: Data.LEVEL4,
              itemStyle: { color: this.state.level4Color }
            },
          ]
        }, true);
    }
  };
  subtractRandomNotLessThanSelf = (obj) => {
    function getRandomNotLessThan(num) {
      return Math.floor(Math.random() * num);
    }
    for (let key in obj) {
      if (Array.isArray(obj[key])) {
        obj[key] = obj[key].map(number => {
          if (typeof number === 'number') {
            const randomSubtraction = getRandomNotLessThan(number);
            return Math.floor(number - randomSubtraction); // 确保结果也为整数
          } else {
            return number;
          }
        });
      }
    }
    return obj;
  }

  //显示详情弹窗
  showDetailModal = (formCode) => {
    var titleTemp =
      this.state.mineType == 20
        ? "尾矿库"
        : this.state.mineType == 10
          ? "选矿厂"
          : "露天矿";
    if (formCode == "chart13") {
      titleTemp += "风险类别";
    } else if (formCode == "") {
      titleTemp += "";
    } else if (formCode == "") {
      titleTemp += "";
    } else if (formCode == "") {
      titleTemp += "";
    } else if (formCode == "") {
      titleTemp += "";
    }

    const newtmpData = {
      data: {
        id: guid(),
        mineType: this.state.mineType,
        onCancel: this.handleCancel,
        homeReload: true,
      },
      formCode: formCode,
    };
    this.setState({ tmpData: newtmpData }, () => {
      var detailForm = {
        isShow: true,
        formCode: formCode,
        title: titleTemp,
      };
      this.setState({
        detailForm: detailForm,
      });
    });
  };
  //详情弹窗关闭（隐藏）
  detailFormClose = () => {
    var detailForm = {
      isShow: false,
      formCode: "",
      title: "",
    };
    this.setState({
      detailForm: detailForm,
    });
  };
  render() {
    return (
      <div
        style={{
          backgroundColor: "white",
          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}
            maskClosable={false}
            closeModal={this.detailFormClose}
            onCancel={this.detailFormClose}
            footer={null}
            width="1300px"
          >
          </Modal>
        </div>
        <Row gutter={12} style={{ marginTop: "5px" }}>
          <Col span={8}>
            <div
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div id="chart11" style={{ width: "100%", height: "430px" }}></div>
            </div>
          </Col>
          <Col span={8} style={{ height: "430px" }}>
            <div
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div id="chart12" style={{ width: "100%", height: "430px" }}></div>
            </div>
          </Col>
          <Col span={8} style={{ height: "430px" }}>
            <div
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div id="chart14" style={{ width: "100%", height: "430px" }}></div>
            </div>
          </Col>

        </Row>
        <Row gutter={12} style={{ marginTop: "10px" }}>
          <Col span={8} style={{ height: "430px" }}>

            <div
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div
                onClick={() =>
                  this.showDetailModal("chart13")
                }
              >
                <IconFont type="icon-24gl-expand2" style={{ fontSize: "18px", color: "#333333", cursor: "pointer" }}></IconFont>
              </div>
              <div id="chart13" style={{ width: "100%", height: "430px" }}></div>
            </div>
          </Col>
          <Col span={8} style={{ height: "430px" }}>
            <div
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div id="chart15" style={{ width: "100%", height: "430px" }}></div>
            </div>
          </Col>
          <Col span={8} style={{ height: "430px" }}>
            <div
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div id="chart4" style={{ width: "100%", height: "430px" }}></div>
            </div>
          </Col>
        </Row>

        <Row gutter={10} style={{ marginTop: "44px" }}>
          <Col span={1}></Col>
          <Col span={11} style={{ height: "430px" }}>
            <div
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div id="chart16" style={{ width: "100%", height: "430px" }}></div>
            </div>
          </Col>
          <Col span={11} style={{ height: "430px" }}>
            <div
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div id="chart17" style={{ width: "100%", height: "430px" }}></div>
            </div>
          </Col>
        </Row>
        <Row gutter={10} style={{ marginTop: "44px" }}>
          <Col span={1}></Col>
          <Col span={11} style={{ height: "430px" }}>
            <div
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div id="chart18" style={{ width: "100%", height: "430px" }}></div>
            </div>
          </Col>
          <Col span={11} style={{ height: "430px" }}>
            <div
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div id="chart19" style={{ width: "100%", height: "430px" }}></div>
            </div>
          </Col>
        </Row>
        <Row gutter={10} style={{ marginTop: "20px" }}>
          <Col span={1}></Col>
        </Row>
        {/* <Row gutter={10} style={{ marginTop: "44px" }}>
          <Col span={10} style={{ height: "430px" }}>
            <div
              style={{ border: "1px solid rgb(232,232,232)" }}
            >
              <div id="chart2" style={{ width: "100%", height: "430px" }}></div>
            </div>
          </Col>
        </Row> */}


        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(
  BI013RiskAnalysisModel
);