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 = {
      level1Color: "#c02e30",
      level2Color: "#f7aa52",
      level3Color: "#fbe06a",
      level4Color: "#5185f3",
      isShow1: false,
      isShow2: false,
      detailForm: {
        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 },
          ],
          CHARTFXDJ1:
          {
            NAME: ["一级", "二级", "三级", "四级"],
            LEVEL1: [3, 8, 181, 1112],
          },
          CHARTFXDJ2: [
            { name: "一级", value: 3 },
            { name: "二级", value: 8 },
            { name: "三级", value: 181 },
            { name: "四级", value: 1112 },
          ],
          CHARTLIST: [
            {
              NAME: ["露天矿", "选矿厂", "尾矿库", "职能部门"],
              LEVEL1: [1, 0, 1, 1],
              LEVEL2: [0, 3, 2, 2],
              LEVEL3: [1, 3, 70, 105],
              LEVEL4: [203, 223, 211, 475],
            },

            {
              NAME: [
                "容器爆炸",
                "淹溺",
                "物体打击",
                "高处坠落",
                "火灾",
                "起重伤害",
                "其他爆炸",
                "中毒和窒息",
                "放炮",
                "冒顶片帮",
                "坍塌",
                "车辆伤害",
                "触电",
                "其他伤害",
                "机械伤害",
                "灼烫",
                "火药爆炸",
              ],
              LEVEL1: [
                1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
                0, 0, 0, 0,
              ],
              LEVEL2: [
                3, 2, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0,
                0, 0, 0, 0,
              ],
              LEVEL3: [
                95, 46, 15, 10, 7, 6, 5, 4, 3, 2, 1, 1, 1, 1, 1, 0, 0
              ],
              LEVEL4: [
                260, 200, 120, 50, 20, 15, 10, 5, 4, 3, 2, 1, 1, 1, 1, 1, 0
              ],
            },

            {
              NAME: [
                "安全环保管理部",
                "选矿部",
                "机电设备管理办公室",
                "矿山部",
                "财务部",
                "非金属资源部筹备组",
                "企业管理部",
                "技术管理部",
              ],
              LEVEL1: [0, 1, 0, 1, 0, 0, 1, 0],
              LEVEL2: [0, 2, 0, 3, 0, 0, 1, 0],
              LEVEL3: [56, 109, 273, 381, 74, 135, 215, 335],
              LEVEL4: [23, 168, 250, 390, 62, 117, 244, 367],
            },

            {
              NAME: ["公司", "部门", "车间", "班组"],
              LEVEL1: [2, 1, 0, 0],
              LEVEL2: [2, 2, 2, 2],
              LEVEL3: [343, 121, 396, 78],
              LEVEL4: [215, 331, 37, 292],
            },
            {
              NAME: [
                "破碎车间",
                "磨重车间",
                "尾矿库库区",
                "钨细泥回收车间",
                "高压配电室",
                "炸药库区",
                "修理场",
                "矿山",
                "加油站-采场",
                "排土场",
              ],
              LEVEL1: [1, 0, 0, 1, 0, 1, 0, 0, 0, 0],
              LEVEL2: [2, 0, 0, 2, 1, 1, 0, 0, 0, 2],
              LEVEL3: [220, 182, 171, 164, 134, 120, 102, 101, 83, 64],
              LEVEL4: [250, 212, 201, 154, 144, 121, 117, 111, 93, 67],
            },
          ],
          TEAMLIST: [
            {
              NAME: ["生产班", "民爆储存库班组", "穿孔班组", "爆破班组", "综合班组"],
              LEVEL1: [1, 0, 1, 1, 0],
              LEVEL2: [0, 1, 1, 2, 0],
              LEVEL3: [10, 13, 20, 35, 33],
              LEVEL4: [18, 33, 43, 21, 27],
            },
            {
              NAME: ["破碎车间", "磨重车间", "破碎一班", "破碎二班", "破碎三班", "磨重一班", "磨重二班", "磨重三班"],
              LEVEL1: [1, 3, 0, 0, 0, 0, 0, 0],
              LEVEL2: [2, 4, 0, 0, 0, 0, 1, 1],
              LEVEL3: [3, 5, 1, 3, 7, 22, 43, 1],
              LEVEL4: [4, 6, 7, 26, 8, 18, 21, 24],
            },
            {
              NAME: ["尾矿一班", "尾矿二班", "尾矿三班", "尾矿机修班"],
              LEVEL1: [0, 0, 0, 0],
              LEVEL2: [0, 0, 0, 0],
              LEVEL3: [1, 3, 70, 105],
              LEVEL4: [23, 13, 21, 15],
            },
            {
              NAME: ["保安班", "小车班", "食堂", "化验班", "采制样班"],
              LEVEL1: [0, 0, 0, 0, 0],
              LEVEL2: [0, 0, 0, 0, 0],
              LEVEL3: [1, 3, 70, 15, 23],
              LEVEL4: [13, 14, 17, 28, 11],
            },
          ],
          AREALIST: [
            {
              NAME: ["电焊作业区", "修理场", "炸药库", "矿山", "加油站-采场"],
              LEVEL1: [1, 0, 1, 1, 0],
              LEVEL2: [0, 1, 1, 2, 0],
              LEVEL3: [10, 13, 20, 35, 33],
              LEVEL4: [18, 33, 43, 21, 27],
            },
            {
              NAME: ["破碎车间", "磨重车间", "尾矿库库区", "钨细泥回收车间", "综合回收车间", "尾矿库截洪单元"],
              LEVEL1: [0, 0, 0, 0, 0, 0],
              LEVEL2: [0, 0, 0, 0, 1, 1],
              LEVEL3: [1, 3, 7, 22, 43, 1],
              LEVEL4: [7, 26, 8, 18, 21, 24],
            },
            {
              NAME: ["尾矿库库区", "高压配电室", "炸药库区", "尾矿机修区"],
              LEVEL1: [0, 0, 0, 0],
              LEVEL2: [0, 0, 0, 0],
              LEVEL3: [1, 3, 70, 105],
              LEVEL4: [23, 13, 21, 15],
            },
            {
              NAME: ["保安办公室", "停车场", "食堂", "化验室", "排土场"],
              LEVEL1: [0, 0, 0, 0, 0],
              LEVEL2: [0, 0, 0, 0, 0],
              LEVEL3: [1, 3, 70, 15, 23],
              LEVEL4: [13, 14, 17, 28, 11],
            },
          ],
          RISKTYPELIST: [
            {
              NAME: ["容器爆炸", "淹溺", "物体打击", "高处坠落", "起重伤害", "其他爆炸", "冒顶片帮", "火药爆炸"],
              LEVEL1: [1, 0, 0, 0, 0, 0, 0, 0],
              LEVEL2: [1, 0, 0, 0, 0, 0, 0, 0],
              LEVEL3: [70, 65, 54, 48, 33, 27, 16, 7],
              LEVEL4: [70, 65, 54, 48, 33, 27, 16, 7]
            },
            {
              NAME: ["其他伤害", "机械伤害", "灼烫", "容器爆炸", "中毒和窒息", "起重伤害", "冒顶片帮", "触电"],
              LEVEL1: [1, 0, 0, 0, 0, 0, 0, 0],
              LEVEL2: [1, 0, 0, 0, 0, 0, 0, 0],
              LEVEL3: [71, 66, 55, 49, 34, 28, 17, 8],
              LEVEL4: [69, 64, 53, 47, 32, 26, 15, 6]
            },
            {
              NAME: ["其他伤害", "车辆伤害", "火药爆炸", "高处坠落", "坍塌", "触电", "机械伤害", "灼烫"],
              LEVEL1: [1, 0, 0, 0, 0, 0, 0, 0],
              LEVEL2: [1, 0, 0, 0, 0, 0, 0, 0],
              LEVEL3: [70, 65, 54, 48, 33, 27, 16, 7],
              LEVEL4: [70, 65, 54, 48, 33, 27, 16, 7]
            },
            {
              NAME: ["机械伤害", "容器爆炸", "物体打击", "高处坠落", "火灾", "其他爆炸", "中毒和窒息", "触电"],
              LEVEL1: [0, 0, 0, 0, 0, 0, 0, 0],
              LEVEL2: [1, 0, 0, 0, 0, 0, 0, 0],
              LEVEL3: [70, 65, 54, 48, 33, 27, 16, 7],
              LEVEL4: [70, 65, 54, 48, 33, 27, 16, 7]
            },
          ],
          CHARTZYRW1:
          {
            NAME: ["许可作业", "关键任务", "一般任务"],
            LEVEL1: [67, 81, 191],
          }
          ,
          CHARTZYRW2: [
            { name: "许可作业", value: 67 },
            { name: "关键任务", value: 81 },
            { name: "一般任务", value: 191 },
          ],
        },
        TotalCount: 0,
        MessageType: 0,
      },
    };
  }

  componentDidMount() {
    this.getBaseInfoDataOnline();
  }

  //获取数据
  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.state.ret = ret;
        this.chart4(ret?.Data.DATECOUNTS);
        this.chartFXDJ1(ret?.Data.CHARTFXDJ1);
        this.chartFXDJ2(ret?.Data.CHARTFXDJ2);
        this.chartSCDY(ret?.Data.CHARTLIST[0]);
        this.chartFXLB1(ret?.Data.CHARTLIST[1]);
        this.chartCJ(ret?.Data.CHARTLIST[3]);
        this.chartZRDW(ret?.Data.CHARTLIST[2]);
        this.chartQY(ret?.Data.CHARTLIST[4]);
        this.chartZYRW1(ret?.Data.CHARTZYRW1);
        this.chartZYRW2(ret?.Data.CHARTZYRW2);
      },
    });
  };
  getBaseInfoData = (mineType) => {
    this.chart4(this.state.ret.Data.DATECOUNTS);
    this.chartFXDJ1(this.state.ret.Data.CHARTFXDJ1);
    this.chartFXDJ2(this.state.ret.Data.CHARTFXDJ2);
    this.chartSCDY(this.state.ret.Data.CHARTLIST[0]);
    this.chartFXLB1(this.state.ret.Data.CHARTLIST[1]);
    this.chartCJ(this.state.ret.Data.CHARTLIST[3]);
    this.chartZRDW(this.state.ret.Data.CHARTLIST[2]);
    this.chartQY(this.state.ret.Data.CHARTLIST[4]);
    this.chartZYRW1(this.state.ret.Data.CHARTZYRW1);
    this.chartZYRW2(this.state.ret.Data.CHARTZYRW2);
  };
  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
      );
    }
  };
  chartFXDJ1 = (Data) => {
    let chartFXDJ1 = document.getElementById("chartFXDJ1");
    if (chartFXDJ1) {
      let myChart = echarts.init(chartFXDJ1);
      myChart.setOption(
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: Data.NAME,
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              barWidth: 20,
              name: "一级",
              type: "bar",
              data: Data.LEVEL1,
              itemStyle: {
                color: function (params) {
                  switch (params.dataIndex) {
                    case 0:
                      return "#c02e30"; // 第一个柱子颜色
                    case 1:
                      return "#f7aa52"; // 第二个柱子颜色
                    case 2:
                      return "#fbe06a"; // 第三个柱子颜色
                    case 3:
                      return "#5185f3"; // 第四个柱子颜色
                  }
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
          ],
        },
        true
      );
    }
  };
  chartFXDJ2 = (Data) => {
    let that = this;
    let chartFXDJ2 = document.getElementById("chartFXDJ2");
    if (chartFXDJ2) {
      let myChart = echarts.init(chartFXDJ2);
      myChart.setOption(
        {
          tooltip: {
            trigger: "item",
            formatter: "{b} : ({d}%)",
          },
          legend: {
            left: "0%",
            bottom: "10%",
            data: ["一级", "二级", "三级", "四级"],
          },
          series: [
            {
              type: "pie",
              radius: '55%',
              center: ["50%", "45%"],
              data: Data,
              itemStyle: {
                color: function (params) {
                  switch (params.dataIndex) {
                    case 0:
                      return "#c02e30"; // 第一个柱子颜色
                    case 1:
                      return "#f7aa52"; // 第二个柱子颜色
                    case 2:
                      return "#fbe06a"; // 第三个柱子颜色
                    case 3:
                      return "#5185f3"; // 第四个柱子颜色
                  }
                }
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                show: true, // 开启标签显示
                formatter: '{d}%', // 格式化标签文本，仅显示数值
              },
            },
          ],
        },
        true
      );
    }
  };
  chartSCDY = (Data) => {
    let chartSCDY = document.getElementById("chartSCDY");
    let myChart = echarts.init(chartSCDY);
    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: ["一级", "二级", "三级", "四级"],
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "12%",
          top: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: Data.NAME,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            barWidth: 20,
            name: "一级",
            type: "bar",
            data: Data.LEVEL1,
            itemStyle: { color: this.state.level1Color },
            label: {
              normal: {
                show: true,
                position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                textStyle: {
                  fontSize: 12, // 字体大小
                  color: '#333', // 字体颜色
                },
              },
            },

          },
          {
            barWidth: 20,
            name: "二级",
            type: "bar",
            data: Data.LEVEL2,
            itemStyle: { color: this.state.level2Color },
            label: {
              normal: {
                show: true,
                position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                textStyle: {
                  fontSize: 12, // 字体大小
                  color: '#333', // 字体颜色
                },
              },
            },
          },
          {
            barWidth: 20,
            name: "三级",
            type: "bar",
            data: Data.LEVEL3,
            itemStyle: { color: this.state.level3Color },
            label: {
              normal: {
                show: true,
                position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                textStyle: {
                  fontSize: 12, // 字体大小
                  color: '#333', // 字体颜色
                },
              },
            },
          },
          {
            barWidth: 20,
            name: "四级",
            type: "bar",
            data: Data.LEVEL4,
            itemStyle: { color: this.state.level4Color },
            label: {
              normal: {
                show: true,
                position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                textStyle: {
                  fontSize: 12, // 字体大小
                  color: '#333', // 字体颜色
                },
              },
            },
          },
        ],
      },
      true
    );
  };

  chartFXLB1 = (Data) => {
    let chartFXLB1 = document.getElementById("chartFXLB1");
    let myChart = echarts.init(chartFXLB1);
    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: "category",
          data: Data.NAME.slice(0, 10),
          axisLabel: {
            interval: 0,
            rotate: 20,
            formatter: function (value) {
              return value
            }
          }
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            barWidth: 20,
            name: "露天矿",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: Data.LEVEL3.slice(0, 10),
            itemStyle: { color: this.state.level3Color },
          },
          {
            barWidth: 20,
            name: "选矿厂",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: Data.LEVEL1.slice(0, 10),
            itemStyle: { color: this.state.level1Color },
          },
          {
            barWidth: 20,
            name: "尾矿库",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: Data.LEVEL2.slice(0, 10),
            itemStyle: { color: this.state.level2Color },
          },
          {
            barWidth: 20,
            name: "职能部门",
            type: "bar",
            stack: "总量",
            label: {
              show: true,
              position: "insideRight",
            },
            data: Data.LEVEL4.slice(0, 10),
            itemStyle: { color: this.state.level4Color },
          },
        ],
      },
      true
    );
  };
  chartZRDW = (Data) => {
    let chartZRDW = document.getElementById("chartZRDW");
    if (chartZRDW) {
      let myChart = echarts.init(chartZRDW);
      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: ["一级", "二级", "三级", "四级"],
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "12%",
            top: "10%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: Data.NAME,
              axisLabel: {
                interval: 0,
                rotate: 20,
                formatter: function (value) {
                  return value;
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              barWidth: 20,
              name: "一级",
              type: "bar",
              data: Data.LEVEL1,
              itemStyle: { color: this.state.level1Color },
              label: {
                show: true,
                position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                textStyle: {
                  fontSize: 12, // 字体大小
                  color: '#333', // 字体颜色
                },
              },
            },
            {
              barWidth: 20,
              name: "二级",
              type: "bar",
              data: Data.LEVEL2,
              itemStyle: { color: this.state.level2Color },
              label: {
                show: true,
                position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                textStyle: {
                  fontSize: 12, // 字体大小
                  color: '#333', // 字体颜色
                },
              },
            },
            {
              barWidth: 20,
              name: "三级",
              type: "bar",
              data: Data.LEVEL3,
              itemStyle: { color: this.state.level3Color },
              label: {
                show: true,
                position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                textStyle: {
                  fontSize: 12, // 字体大小
                  color: '#333', // 字体颜色
                },
              },
            },
            {
              barWidth: 20,
              name: "四级",
              type: "bar",
              data: Data.LEVEL4,
              itemStyle: { color: this.state.level4Color },
              label: {
                show: true,
                position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                textStyle: {
                  fontSize: 12, // 字体大小
                  color: '#333', // 字体颜色
                },
              },
            },
          ],
        },
        true
      );
    }
  };
  chartCJ = (Data) => {
    let chartCJ = document.getElementById("chartCJ");
    if (chartCJ) {
      let myChart = echarts.init(chartCJ);
      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: [
            {
              barWidth: 20,
              name: "一级",
              type: "bar",
              data: Data.LEVEL1,
              itemStyle: { color: this.state.level1Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              barWidth: 20,
              name: "二级",
              type: "bar",
              data: Data.LEVEL2,
              itemStyle: { color: this.state.level2Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              barWidth: 20,
              name: "三级",
              type: "bar",
              data: Data.LEVEL3,
              itemStyle: { color: this.state.level3Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              barWidth: 20,
              name: "四级",
              type: "bar",
              data: Data.LEVEL4,
              itemStyle: { color: this.state.level4Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
          ],
        },
        true
      );
    }
  };
  chartQY = (Data) => {
    let chartQY = document.getElementById("chartQY");
    if (chartQY) {
      let myChart = echarts.init(chartQY);
      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: 20,
              formatter: function (value) {
                return value
              }
            }
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              barWidth: 20,
              name: "一级",
              type: "bar",
              stack: "总量",
              label: {
                show: true,
                position: "insideRight",
              },
              data: Data.LEVEL1,
              itemStyle: { color: this.state.level1Color },
            },
            {
              barWidth: 20,
              name: "二级",
              type: "bar",
              stack: "总量",
              label: {
                show: true,
                position: "insideRight",
              },
              data: Data.LEVEL2,
              itemStyle: { color: this.state.level2Color },
            },
            {
              barWidth: 20,
              name: "三级",
              type: "bar",
              stack: "总量",
              label: {
                show: true,
                position: "insideRight",
              },
              data: Data.LEVEL3,
              itemStyle: { color: this.state.level3Color },
            },
            {
              barWidth: 20,
              name: "四级",
              type: "bar",
              stack: "总量",
              label: {
                show: true,
                position: "insideRight",
              },
              data: Data.LEVEL4,
              itemStyle: { color: this.state.level4Color },
            },
          ],
        },
        true
      );
    }
  };
  chartZYRW1 = (Data) => {
    let chartZYRW1 = document.getElementById("chartZYRW1");
    if (chartZYRW1) {
      let myChart = echarts.init(chartZYRW1);
      myChart.setOption(
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
            },
          },
          grid: {
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: Data.NAME,
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              barWidth: 20,
              name: "一级",
              type: "bar",
              data: Data.LEVEL1,
              itemStyle: {
                color: function (params) {
                  switch (params.dataIndex) {
                    case 0:
                      return "#f7aa52"; // 第一个柱子颜色
                    case 1:
                      return "#fbe06a"; // 第二个柱子颜色
                    case 2:
                      return "#5185f3"; // 第三个柱子颜色
                  }
                }
              },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
          ],
        },
        true
      );
    }
  };
  chartZYRW2 = (Data) => {
    let that = this;
    let chartZYRW2 = document.getElementById("chartZYRW2");
    if (chartZYRW2) {
      let myChart = echarts.init(chartZYRW2);
      myChart.setOption(
        {
          tooltip: {
            trigger: "item",
            formatter: "{b} : ({d}%)",
          },
          legend: {
            left: "0%",
            bottom: "10%",
            data: ["许可作业", "关键任务", "一般任务"],
          },
          series: [
            {
              type: "pie",
              radius: '55%',
              center: ["50%", "45%"],
              data: Data,
              itemStyle: {
                color: function (params) {
                  switch (params.dataIndex) {
                    case 0:
                      return "#f7aa52"; // 第一个柱子颜色
                    case 1:
                      return "#fbe06a"; // 第二个柱子颜色
                    case 2:
                      return "#5185f3"; // 第三个柱子颜色
                  }
                }
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                show: true, // 开启标签显示
                formatter: '{d}%', // 格式化标签文本，仅显示数值
              },
            },
          ],
        },
        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;
  };
  chart21 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => {
    let chart21s = document.getElementById("chart21");
    if (chart21s) {
      let myChart = echarts.init(chart21s);
      myChart.setOption(
        {
          title: {
            text: Title,
            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: 30,
                formatter: function (value) {
                  return value
                }
              }
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              barWidth: 20,
              name: "一级",
              type: "bar",
              data: Data.LEVEL1,
              stack: Stack1,
              itemStyle: { color: this.state.level1Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              barWidth: 20,
              name: "二级",
              type: "bar",
              data: Data.LEVEL2,
              stack: Stack2,
              itemStyle: { color: this.state.level2Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              barWidth: 20,
              name: "三级",
              type: "bar",
              data: Data.LEVEL3,
              stack: Stack3,
              itemStyle: { color: this.state.level3Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              barWidth: 20,
              name: "四级",
              type: "bar",
              data: Data.LEVEL4,
              stack: Stack4,
              itemStyle: { color: this.state.level4Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
          ],
        },
        true
      );
    }
  };
  chart22 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => {
    let chart22s = document.getElementById("chart22");
    if (chart22s) {
      let myChart = echarts.init(chart22s);
      myChart.setOption(
        {
          title: {
            text: Title,
            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: 30,
                formatter: function (value) {
                  return value
                }
              }
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              barWidth: 20,
              name: "一级",
              type: "bar",
              data: Data.LEVEL1,
              stack: Stack1,
              itemStyle: { color: this.state.level1Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },

            },
            {
              barWidth: 20,
              name: "二级",
              type: "bar",
              data: Data.LEVEL2,
              stack: Stack2,
              itemStyle: { color: this.state.level2Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              barWidth: 20,
              name: "三级",
              type: "bar",
              data: Data.LEVEL3,
              stack: Stack3,
              itemStyle: { color: this.state.level3Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              barWidth: 20,
              name: "四级",
              type: "bar",
              data: Data.LEVEL4,
              stack: Stack4,
              itemStyle: { color: this.state.level4Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
          ],
        },
        true
      );
    }
  };
  chart23 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => {
    let chart23s = document.getElementById("chart23");
    if (chart23s) {
      let myChart = echarts.init(chart23s);
      myChart.setOption(
        {
          title: {
            text: Title,
            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: 30,
                formatter: function (value) {
                  return value
                }
              }
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              barWidth: 20,
              name: "一级",
              type: "bar",
              data: Data.LEVEL1,
              stack: Stack1,
              itemStyle: { color: this.state.level1Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },

            },
            {
              barWidth: 20,
              name: "二级",
              type: "bar",
              data: Data.LEVEL2,
              stack: Stack2,
              itemStyle: { color: this.state.level2Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              barWidth: 20,
              name: "三级",
              type: "bar",
              data: Data.LEVEL3,
              stack: Stack3,
              itemStyle: { color: this.state.level3Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              barWidth: 20,
              name: "四级",
              type: "bar",
              data: Data.LEVEL4,
              stack: Stack4,
              itemStyle: { color: this.state.level4Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
          ],
        },
        true
      );
    }
  };
  chart24 = (Data, Title, Stack1, Stack2, Stack3, Stack4) => {
    let chart24s = document.getElementById("chart24");
    if (chart24s) {
      let myChart = echarts.init(chart24s);
      myChart.setOption(
        {
          title: {
            text: Title,
            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: 30,
                formatter: function (value) {
                  return value
                }
              }
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              barWidth: 20,
              name: "一级",
              type: "bar",
              data: Data.LEVEL1,
              stack: Stack1,
              itemStyle: { color: this.state.level1Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },

            },
            {
              barWidth: 20,
              name: "二级",
              type: "bar",
              data: Data.LEVEL2,
              stack: Stack2,
              itemStyle: { color: this.state.level2Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              barWidth: 20,
              name: "三级",
              type: "bar",
              data: Data.LEVEL3,
              stack: Stack3,
              itemStyle: { color: this.state.level3Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              barWidth: 20,
              name: "四级",
              type: "bar",
              data: Data.LEVEL4,
              stack: Stack4,
              itemStyle: { color: this.state.level4Color },
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
          ],
        },
        true
      );
    }
  };
  chart25 = (Data, Title) => {
    let chart25s = document.getElementById("chart25");
    if (chart25s) {
      let myChart = echarts.init(chart25s);
      myChart.setOption(
        {
          // title: {
          //   text: Title,
          //   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: 20,
                formatter: function (value) {
                  return value
                }
              }
            },
          ],
          yAxis: [
            {
              type: "value",
            },
          ],
          series: [
            {
              name: "一级",
              type: "bar",
              data: Data.LEVEL1,
              itemStyle: { color: this.state.level1Color },
              stack: "总量",
              barWidth: 20,
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              name: "二级",
              type: "bar",
              data: Data.LEVEL2,
              itemStyle: { color: this.state.level2Color },
              stack: "总量",
              barWidth: 20,
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              name: "三级",
              type: "bar",
              data: Data.LEVEL3,
              itemStyle: { color: this.state.level3Color },
              stack: "总量",
              barWidth: 20,
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
            {
              name: "四级",
              type: "bar",
              data: Data.LEVEL4,
              itemStyle: { color: this.state.level4Color },
              stack: "总量",
              barWidth: 20,
              label: {
                normal: {
                  show: true,
                  position: 'top', // 或者 'inside'（内部）、'insideLeft'、'insideRight' 等其他位置
                  formatter: '{c}', // 使用变量 {c} 表示数值，也可以自定义格式化函数
                  textStyle: {
                    fontSize: 12, // 字体大小
                    color: '#333', // 字体颜色
                  },
                },
              },
            },
          ],
        },
        true
      );
    }
  };
  //显示详情弹窗
  showDetailModal = (formCode) => {
    var titleTemp ="";
    if (formCode == "风险类别1") {
      titleTemp += "风险类别";
      this.chart25(this.state.ret.Data.CHARTLIST[1]);
      this.setState({ isShow2: true })
    } else if (formCode == "风险类别2") {
      titleTemp += "风险类别";
      this.chart21(this.state.ret.Data.RISKTYPELIST[0], "露天矿", "1", "1", "1", "1");
      this.chart22(this.state.ret.Data.RISKTYPELIST[1], "选矿厂", "1", "1", "1", "1");
      this.chart23(this.state.ret.Data.RISKTYPELIST[2], "尾矿库", "1", "1", "1", "1");
      this.chart24(this.state.ret.Data.RISKTYPELIST[3], "职能部门", "1", "1", "1", "1");
      this.setState({ isShow1: true })
    }
    else if (formCode == "生产单元") {
      this.setState({ isShow1: true })
      titleTemp += "生产单元";
      this.chart21(this.state.ret.Data.SCDYLIST[0], "露天矿", "1", "2", "3", "4");
      this.chart22(this.state.ret.Data.SCDYLIST[1], "选矿厂", "1", "2", "3", "4");
      this.chart23(this.state.ret.Data.SCDYLIST[2], "尾矿库", "1", "2", "3", "4");
      this.chart24(this.state.ret.Data.SCDYLIST[3], "职能部门", "1", "2", "3", "4");
    } else if (formCode == "层级") {
      this.setState({ isShow1: true })
      titleTemp += "层级";
      this.chart21(this.state.ret.Data.CJLIST[0], "公司", "1", "2", "3", "4");
      this.chart22(this.state.ret.Data.CJLIST[1], "部门", "1", "2", "3", "4");
      this.chart23(this.state.ret.Data.CJLIST[2], "车间", "1", "2", "3", "4");
      this.chart24(this.state.ret.Data.CJLIST[3], "班组", "1", "2", "3", "4");
    } else if (formCode == "责任单位") {
      this.setState({ isShow1: true })
      titleTemp += "责任单位";
      this.chart21(this.state.ret.Data.TEAMLIST[0], "露天矿", "1", "1", "1", "1");
      this.chart22(this.state.ret.Data.TEAMLIST[1], "选矿厂", "1", "1", "1", "1");
      this.chart23(this.state.ret.Data.TEAMLIST[2], "尾矿库", "1", "1", "1", "1");
      this.chart24(this.state.ret.Data.TEAMLIST[3], "职能部门", "1", "1", "1", "1");
    } else if (formCode == "区域") {
      this.setState({ isShow1: true })
      titleTemp += "区域";
      this.chart21(this.state.ret.Data.AREALIST[0], "露天矿", "1", "1", "1", "1");
      this.chart22(this.state.ret.Data.AREALIST[1], "选矿厂", "1", "1", "1", "1");
      this.chart23(this.state.ret.Data.AREALIST[2], "尾矿库", "1", "1", "1", "1");
      this.chart24(this.state.ret.Data.AREALIST[3], "职能部门", "1", "1", "1", "1");
    }

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

  render() {
    return (
      <div
        style={{
          backgroundColor: "#fff",
          top: "0",
          bottom: "0",
          left: "0",
          right: "0",
          margin: "auto",
          // borderStyle: "solid",
          // borderColor: "#ccc",
          // borderWidth: "1px",
        }}
      >
        <div style={{ display: "inline-block" }}>
          <Modal
            visible={this.state.isShow1}
            title={this.state.detailForm.title}
            maskClosable={false}
            closeModal={this.detailFormClose}
            onCancel={this.detailFormClose}
            footer={null}
            width="1300px"
            getContainer={false}
          >
            <Row gutter={12} style={{ marginTop: "5px" }}>
              <Col span={12}>
                <div id="chart21" style={{ width: "500px", height: "300px", flex: 1 }}></div>
                <div id="chart23" style={{ width: "500px", height: "300px", flex: 1 }}></div>
              </Col>
              <Col span={12}>
                <div id="chart22" style={{ width: "500px", height: "300px", flex: 1 }}></div>
                <div id="chart24" style={{ width: "500px", height: "300px", flex: 1 }}></div>
              </Col>
            </Row>
          </Modal>
          <Modal
            visible={this.state.isShow2}
            title={this.state.detailForm.title}
            maskClosable={false}
            closeModal={this.detailFormClose}
            onCancel={this.detailFormClose}
            footer={null}
            width="1300px"
            getContainer={false}
          >
            <div id="chart25" style={{ width: "1200px", height: "700px", flex: 1 }}></div>
          </Modal>
        </div>
        <Row gutter={12} style={{ marginTop: "5px" }}>
          <Col span={1}></Col>
          <Col span={11} className="risk-model-col" style={{ padding: 0 }}>
            <div className="home-always-title">
              <div className="home-always-left">
                <div className="home-always-badge"></div>
                <div className="home-always-name">风险等级</div>
              </div>
            </div>
            <div id="chartFXDJ1" style={{ width: "45%", height: "330px", float: "left" }}></div>
            <div id="chartFXDJ2" style={{ width: "45%", height: "330px", float: "left" }}></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>
            <div id="chart4" style={{ width: "100%", height: "330px" }}></div>
          </Col>
          <Col span={1}></Col>
        </Row>
        <Row gutter={12} style={{ marginTop: "30px" }}>
          <Col span={1}></Col>
          <Col span={11} className="risk-model-col" style={{ padding: 0 }}>
            <div className="home-always-title">
              <div className="home-always-left">
                <div className="home-always-badge"></div>
                <div className="home-always-name">生产单元</div>
              </div>
              <div onClick={() => this.showDetailModal("生产单元")}>
                <IconFont
                  type="icon-24gl-expand2"
                  className="home-always-icon"
                ></IconFont>
              </div>
            </div>
            <div id="chartSCDY" 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("层级")}>
                <IconFont
                  type="icon-24gl-expand2"
                  className="home-always-icon"
                ></IconFont>
              </div>
            </div>
            <div className="risk-chart" style={{ height: "330px" }}>
              <div id="chartCJ" style={{ width: "100%", flex: 1 }}></div>
            </div>
          </Col>
        </Row>
        <Row gutter={12} style={{ marginTop: "30px" }}>
          <Col span={1}></Col>
          <Col span={11} className="risk-model-col" style={{ padding: 0 }}>
            <div className="home-always-title">
              <div className="home-always-left">
                <div className="home-always-badge"></div>
                <div className="home-always-name">责任单位</div>
              </div>
              <div onClick={() => this.showDetailModal("责任单位")}>
                <IconFont
                  type="icon-24gl-expand2"
                  className="home-always-icon"
                ></IconFont>
              </div>
            </div>
            <div className="risk-chart" style={{ height: "330px" }}>
              <div id="chartZRDW" 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("区域")}>
                <IconFont
                  type="icon-24gl-expand2"
                  className="home-always-icon"
                ></IconFont>
              </div>
            </div>
            <div id="chartQY" style={{ width: "100%", height: "330px" }}></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("风险类别2")}>
                <IconFont
                  type="icon-24gl-expand2"
                  className="home-always-icon"
                ></IconFont>
              </div>
            </div>
            <div className="risk-chart" style={{ height: "330px" }}>
              <div id="chartFXLB1" 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>
            <div id="chartZYRW1" style={{ width: "45%", height: "330px", float: "left" }}></div>
            <div id="chartZYRW2" style={{ width: "45%", height: "330px", float: "left" }}></div>
          </Col>
          <Col span={1}></Col>
        </Row>
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(
  BI014RiskPerformanceModel
);