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 BI014RiskPerformanceModel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      choose: 1,
      chooseTwo: 1,
      chooseThree: 1,
      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: 3 },
            { name: "二级", value: 8 },
            { name: "三级", value: 181 },
            { name: "四级", value: 1112 },
          ],
          CHARTLIST: [
            {
              NAME: ["选矿厂", "尾矿库", "露天矿","职能部门"],
              LEVEL1: [137, 190, 168,14],
              LEVEL2: [251, 231, 242,15],
              LEVEL3: [365, 346, 370,16],
              LEVEL4: [437, 497, 478,17],
            },

            {
              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;
    let color = [
      "#0090FF",
      "#36CE9E",
      "#FFC005",
      "#FF515A",
      "#8B5CFF",
      "#00CA69",
    ];
    const hexToRgba = (hex, opacity) => {
      let rgbaColor = "";
      let reg = /^#[\da-f]{6}$/i;
      if (reg.test(hex)) {
        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
          "0x" + hex.slice(3, 5)
        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
      }
      return rgbaColor;
    };
    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: color,
          grid: {
            left: "10%",
            right: "5%",
          },
          legend: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
          },
          // title: {
          //   text: "月度风险辨识统计走势",
          //   left: "center",
          //   top: "2%",
          // },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          xAxis: {
            type: "category",
            data: dates,
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}月",
              textStyle: {
                color: "#333",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#D9D9D9",
              },
            },
          },
          yAxis: {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#666",
              },
            },
            nameTextStyle: {
              color: "#666",
              fontSize: 12,
              lineHeight: 40,
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#E9E9E9",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          series: [
            {
              name: "危险源/风险库",
              data: riskArr,
              type: "line",
              smooth: true,
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: color[0],
                  shadowBlur: 3,
                  shadowColor: hexToRgba(color[0], 0.5),
                  shadowOffsetY: 8,
                },
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: hexToRgba(color[0], 0.3),
                      },
                      {
                        offset: 1,
                        color: hexToRgba(color[0], 0.1),
                      },
                    ],
                    false
                  ),
                  shadowColor: hexToRgba(color[0], 0.1),
                  shadowBlur: 10,
                },
              },
            },
            {
              name: "职业危害库",
              data: hazardArr,
              type: "line",
              smooth: true,
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: color[1],
                  shadowBlur: 3,
                  shadowColor: hexToRgba(color[1], 0.5),
                  shadowOffsetY: 8,
                },
              },
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: hexToRgba(color[1], 0.3),
                      },
                      {
                        offset: 1,
                        color: hexToRgba(color[1], 0.1),
                      },
                    ],
                    false
                  ),
                  shadowColor: hexToRgba(color[1], 0.1),
                  shadowBlur: 10,
                },
              },
            },
          ],
        },
        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: ["40%", "55%"],
              center: ["30%", "50%"],
              // radius: '65%',
              // center: ['45%', '50%'],
              data: Data,
              itemStyle: {
                //图形样式
                normal: {
                  borderColor: "#ffffff",
                  borderWidth: 2,
                  padding: "0 20px",
                },
              },
              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: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: ["一级", "二级", "三级", "四级"],
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "12%",
            top: "10%",
            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: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: ["一级", "二级", "三级", "四级"],
          },
          grid: {
            left: "3%",
            right: "5%",
            bottom: "12%",
            top: "10%",
            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: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: ["一级", "二级", "三级", "四级"],
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "12%",
            top: "10%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: Data.NAME,
              axisLabel: {
                interval: 0,
                rotate: 0,
                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: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: ["一级", "二级", "三级", "四级"],
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "12%",
            top: "10%",
            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: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: ["一级", "二级", "三级", "四级"],
          },
          grid: {
            left: "3%",
            right: "5%",
            bottom: "10%",
            top: "8%",
            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: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: ["一级", "二级", "三级", "四级"],
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "12%",
            top: "10%",
            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: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: ["一级", "二级", "三级", "四级"],
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "12%",
            top: "10%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: Data.NAME,
              axisLabel: {
                interval: 0,
                rotate: 0,
                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: {
            left: "center",
            align: "left",
            bottom: "2%",
            textStyle: {
              color: "#000",
            },
            itemWidth: 10,
            itemHeight: 10,
            data: ["一级", "二级", "三级", "四级"],
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "12%",
            top: "10%",
            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
      );
    }
  };
  chart20 = (Data) => {
    let chart20s = document.getElementById("chart20");
    if (chart20s) {
      let myChart = echarts.init(chart20s);
      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: ["一级", "二级", "三级", "四级"],
          },
          grid: {
            left: "3%",
            right: "5%",
            bottom: "12%",
            top: "10%",
            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 == "风险类别") {
      titleTemp += "风险类别";
      this.chart20(this.state.ret.Data.CHARTLIST[1]);
    } else if (formCode == "生产单元") {
      titleTemp += "生产单元";
      //this.chart21(this.state.ret.Data.CHARTLIST[1]);
    } 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,
    });
  };
  choose = (index) => {
    if (index == 2) {
      this.setState(
        {
          choose: 2,
        },
        () => {
          this.chart16(this.state.ret.Data.CHARTLIST[4]);
        }
      );
    } else {
      this.setState(
        {
          choose: 1,
        },
        () => {
          this.chart13(this.state.ret.Data.CHARTLIST[1]);
        }
      );
    }
  };
  chooseTwo = (index) => {
    if (index == 2) {
      this.setState(
        {
          chooseTwo: 2,
        },
        () => {
          this.chart17(this.state.ret.Data.CHARTLIST[5]);
        }
      );
    } else {
      this.setState(
        {
          chooseTwo: 1,
        },
        () => {
          this.chart15(this.state.ret.Data.CHARTLIST[3]);
        }
      );
    }
  };
  chooseThree = (index) => {
    if (index == 2) {
      this.setState(
        {
          chooseThree: 2,
        },
        () => {
          this.chart18(this.state.ret.Data.CHARTLIST[6]);
        }
      );
    } else {
      this.setState(
        {
          chooseThree: 1,
        },
        () => {
          this.chart14(this.state.ret.Data.CHARTLIST[2]);
        }
      );
    }
  };
  render() {
    return (
      <div
        style={{
          backgroundColor: "#fff", //F4F7FF
          //  width: "1200px",
          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"
            getContainer={false}
          >
             <div id="chart20" style={{ width: "1200px", height:"700px", flex: 1 }}></div>
          </Modal>
        </div>
        <Row gutter={12} style={{ marginTop: "5px" }}>
          <Col span={1}></Col>
          <Col span={9} 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">（动态4个层级 公司 部门。。）风险等级</div>
              </div>
            </div>
            <div id="chart11" style={{ width: "100%", height: "430px" }}></div>
          </Col>
          <Col span={1}></Col>
          <Col span={9} 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="chart12" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          
          <Col span={1}></Col>
        </Row>
        <Row gutter={12} style={{ marginTop: "30px" }}>
          <Col span={1}></Col>
          <Col span={12} 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: "430px" }}>
              <div className="risk-model-tab">
                <div
                  className={
                    this.state.choose == 1
                      ? "risk-model-card-choose"
                      : "risk-model-card"
                  }
                  onClick={() => {
                    this.choose(1);
                  }}
                >
                  选矿厂，尾矿库，露天矿
                </div>
                <div
                  className={
                    this.state.choose == 2
                      ? "risk-model-card-choose"
                      : "risk-model-card"
                  }
                  onClick={() => {
                    this.choose(2);
                  }}
                >
                  公司，部门，车间，班组
                </div>
              </div>
              {this.state.choose == 1 ? (
                <div id="chart13" style={{ width: "100%", flex: 1 }}></div>
              ) : (
                <div id="chart16" style={{ width: "100%", flex: 1 }}></div>
              )}
            </div>
          </Col>
          <Col span={1}></Col>
          <Col span={12} 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>
            <div className="risk-chart" style={{ height: "330px" }}>
              <div className="risk-model-tab">
                <div
                  className={
                    this.state.chooseTwo == 1
                      ? "risk-model-card-choose"
                      : "risk-model-card"
                  }
                  onClick={() => {
                    this.chooseTwo(1);
                  }}
                >
                  按等级划分
                </div>
                <div
                  className={
                    this.state.chooseTwo == 2
                      ? "risk-model-card-choose"
                      : "risk-model-card"
                  }
                  onClick={() => {
                    this.chooseTwo(2);
                  }}
                >
                  按生产单元+等级划分
                </div>
              </div>
              {this.state.chooseTwo == 1 ? (
                <div id="chart15" style={{ width: "100%", flex: 1 }}></div>
              ) : (
                <div id="chart17" 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={22} 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>
            <div className="risk-chart" style={{ height: "330px" }}>
              <div className="risk-model-tab">
                <div
                  className={
                    this.state.chooseThree == 1
                      ? "risk-model-card-choose"
                      : "risk-model-card"
                  }
                  onClick={() => {
                    this.chooseThree(1);
                  }}
                >
                  按等级划分
                </div>
                <div
                  className={
                    this.state.chooseThree == 2
                      ? "risk-model-card-choose"
                      : "risk-model-card"
                  }
                  onClick={() => {
                    this.chooseThree(2);
                  }}
                >
                  按生产单元+等级划分
                </div>
              </div>
              {this.state.chooseThree == 1 ? (
                <div id="chart14" style={{ width: "100%", flex: 1 }}></div>
              ) : (
                <div id="chart18" 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={9} 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>
            <div id="chart4" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          <Col span={1}></Col>
          <Col span={12} 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>
            <div id="chart19" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          <Col span={1}></Col>
        </Row>
        <Row gutter={10} style={{ marginTop: "20px" }}>
          <Col span={1}></Col>
        </Row>
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(
  BI014RiskPerformanceModel
);