import React, { useState, useEffect, useMemo, useRef } from 'react';
import { connect } from 'dva';
import { withRouter, matchPath } from 'dva/router';
import { Scrollbars } from 'react-custom-scrollbars';
import { Icon, Row, Col, Progress, Tabs } from 'antd';
import EnergyIcon from '../utils/energyIcon';
import { $consts } from '../plugins';
import styles from './fullinter.less';
import echarts from 'echarts';
import realGif from '../assets/layout/mofang.png';
import logo from '../assets/layout/headerno-logo-new.png';
import debounce from 'lodash.debounce';
import storage from '../utils/storage';
import { initFilter } from '../utils/common';
import {
  FullScreenContainer,
  BorderBox8,
  BorderBox10,
  ScrollBoard,
  CapsuleChart,
  WaterLevelPond,
  BorderBox7,
  BorderBox6,
} from '@jiaminghi/data-view-react';
import { color } from 'echarts/lib/export';
import { title } from 'process';
const { TabPane } = Tabs;

const getScale = () => {
  const width = 1920,
    height = 1080; // 此处可以根据实际设计稿尺寸修改
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};

class FullScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      safetySloganOne: '',
      animationDuration: 20,
      sliderColor: '#de4e58',
      sliderSize: '24px',
      nowDate: '',
      riskTypeRate: [], //风险等级占比
      linkSum: [],
      jobTodayTop3: [], //当日工作票排名前三
      hiddenRectify: {}, //隐患整改率
      taskTop3: [], //各事项排名前三
      jobFinishRate: [], //作业现场完成情况统计
      safeCheckSum: [], //各公司安全检查统计
      listSETrainSum: [], //各公司安全培训统计
      scale: getScale(),
      configBanner: ['首页', '风险管理', '安全检查', '隐患管理', '作业现场', '安全培训'],
    };
    this.echartsInstances = {
      riskLevel: null,
      opretionTrend: null,
      completeone: null,
    };
  }

  setScale = debounce(() => {
    // debounce节流
    // 获取到缩放比，设置它
    let scale = getScale();
    this.setState({ scale });
  }, 500);

  componentDidMount() {
    window.addEventListener('resize', this.setScale); // 得到呈现的屏幕宽高比
    // this.getHomeTitle();
    this.getHomeDataArray();
    this.setState({ activeTab: '首页' });

    this.timer = setInterval(() => {
      this.setState({
        nowDate: this.getDate(),
      });
    }, 1000);
  }
  executionChart = () => {
    this.riskLevel();
    this.safeCheckChart();
    this.dangerOperation();
    this.completeChart();
    this.backLog();
    this.safedanger();
  };

  componentDidUpdate(prevProps, prevState) {
    // 当从其他tab切换回首页时
    if (prevState.activeTab !== this.state.activeTab && this.state.activeTab === '首页') {
      // 延迟确保DOM已渲染
      setTimeout(() => {
        this.executionChart();
      }, 300); // 稍微增加延迟时间
    }
  }
  handleTabClick = (name) => {
    // 如果从首页切换到其他tab，先清理图表

    this.setState({ activeTab: name });

    const tabActions = {
      首页: () => {
        console.log('跳转到首页');
        // 首页图表会在componentDidUpdate中初始化
      },
      风险管控: () => {
        console.log('跳转到风险管控');
      },
      隐患治理: () => {
        console.log('跳转到隐患治理');
      },
      // ... 其他tab
    };

    if (tabActions[name]) {
      tabActions[name]();
    }
  };
  componentWillUnmount() {
    window.removeEventListener('resize', this.setScale);
    clearInterval(this.timer);
  }
  getDate = () => {
    var myDate = new Date();
    var year = myDate.getFullYear(); //获取当前年
    var mon = myDate.getMonth() + 1; //获取当前月
    var date = myDate.getDate(); //获取当前日
    // var hours = myDate.getHours(); //获取当前小时
    // var minutes = myDate.getMinutes(); //获取当前分钟

    if (myDate.getHours() < 10) {
      var hours = '0' + myDate.getHours();
    } else {
      hours = myDate.getHours(); //获取当前小时
    }
    if (myDate.getMinutes() < 10) {
      var minutes = '0' + myDate.getMinutes();
    } else {
      minutes = myDate.getMinutes(); //获取当前分钟
    }
    if (myDate.getSeconds() < 10) {
      var seconds = '0' + myDate.getSeconds();
    } else {
      seconds = myDate.getSeconds(); //获取当前秒
    }

    var now = year + ' 年 ' + mon + ' 月 ' + date + ' 日 ' + '\t\t\t' + hours + ' : ' + minutes + ' : ' + seconds;
    return now;
  };
  getHomeDataArray = () => {
    var orgId = storage('lacal').getItem('webOrgId')?.val; //登录后有存储登录信息
    let json = initFilter(orgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BIKanBanController/ReturnAllData',
      onComplete: (ret) => {
        if (ret) {
          this.setState(
            {
              riskTypeRate: ret.riskTypeRate,
              linkSum: ret.linkSum,
              jobTodayTop3: ret.jobTodayTop3,
              hiddenRectify: ret.hiddenRectify,
              taskTop3: ret.taskTop3,
              jobFinishRate: ret.jobFinishRate,
              safeCheckSum: ret.safeCheckSum,
              listSETrainSum: ret.listSETrainSum,
            },
            () => {
              this.executionChart();
            }
          );
        }
      },
    });
  };
  riskLevel = () => {
    // 如果已有实例，先销毁
    if (this.echartsInstances.riskLevel) {
      this.echartsInstances.riskLevel.dispose();
      this.echartsInstances.riskLevel = null;
    }

    const riskLevels = document.getElementById('riskLevelFull');
    if (!riskLevels) {
      // 使用requestAnimationFrame而不是setTimeout
      requestAnimationFrame(() => {
        this.executionChart();
      });
      return;
    }
    // 初始化echarts实例并保存引用
    this.echartsInstances.riskLevel = echarts.init(riskLevels);
    const option = {
      color: ['#c92a2a', '#FF6710', '#FFDD1E', '#0091FF', '#fa8a89'],
      title: [
        {
          text: '风险分级占比',
          x: 'center',
          y: '5%',
          textStyle: {
            fontSize: 16,
            color: '#fff',
          },
        },
      ],
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          const color = params.color;
          return `<div style="display: flex; align-items: center;">
          <span style="
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: ${color};
            margin-right: 8px;
          "></span>
          <span>${params.name}:</span>
          <span style="
            font-weight: bold;
            margin-left: 8px;
            font-size: 16px;
          ">${params.value}</span>
        </div>`;
        },
        backgroundColor: 'rgba(255, 255, 255, 0.5)',
        borderColor: '#FFFFFF',
        borderWidth: 2,
        textStyle: {
          color: '#000',
          fontSize: 14,
          fontWeight: 'normal',
        },
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          minAngle: 20,
          radius: ['40%', '60%'],
          center: ['50%', '50%'],
          clockwise: true,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          label: {
            show: true,
            position: 'inside',
            formatter: '{a|{b}：{c}}{e|({d}%)}\n',
            color: '#FFFFFF',
            textBorderWidth: 0,
            rich: {
              a: {
                padding: [-15, 0, 0, 0],
                fontSize: 15,
                color: '#FFFFFF',
                textBorderWidth: 0,
                textShadow: 'none',
              },
              e: {
                fontSize: 14,
                color: '#FFFFFF',
                padding: [-15, 0, 0, 5],
                textBorderWidth: 0,
                textShadow: 'none',
              },
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: this.state.riskTypeRate.map((item) => ({
            name: item.riskType,
            value: item.count,
          })),
        },
      ],
    };

    this.echartsInstances.riskLevel.setOption(option);

    // 监听窗口大小变化
    const resizeHandler = () => {
      if (this.echartsInstances.riskLevel) {
        this.echartsInstances.riskLevel.resize();
      }
    };

    // 移除旧的监听器
    if (this.riskResizeHandler) {
      window.removeEventListener('resize', this.riskResizeHandler);
    }

    this.riskResizeHandler = resizeHandler;
    window.addEventListener('resize', resizeHandler);
  };
  transformDat = (originalData, barTopColor, num) => {
    // 添加空值检查
    if (!originalData || !Array.isArray(originalData) || originalData.length === 0) {
      return {
        companyNames: [],
        series: [],
        legendData: [],
      };
    }
    // 获取所有的类型名称（去重）
    let allTypes = [];
    if (num == 1) {
      allTypes = [...new Set(originalData.flatMap((item) => item.details?.map((detail) => detail.jobName)))];
    } else {
      allTypes = [...new Set(originalData.flatMap((item) => item.details?.map((detail) => detail.name)))];
    }

    // 获取所有的公司名称（作为 x 轴标签）
    const companyNames = originalData?.map((item) => item.company);

    // 为每个类型创建数据系列
    const series = allTypes?.map((typeName, index) => {
      return {
        name: typeName,
        type: 'bar',
        itemStyle: {
          normal: {
            color: function (params) {
              if (num == 1) {
                return barTopColor[index];
              } else {
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: barTopColor[index][0],
                  },
                  {
                    offset: 1,
                    color: barTopColor[index][1],
                  },
                ]);
              }
            },
          },
        },
        data: originalData?.map((company) => {
          // 找到该公司对应类型的数据，如果没有则返回 0
          const detail = company.details?.find((d) => (num == 1 ? d.jobName : d.name) === typeName);
          return detail ? detail.qty : 0;
        }),
      };
    });

    return {
      companyNames, // x 轴数据
      series, // 系列数据
      legendData: allTypes, // legend 的 data
    };
  };

  safeCheckChart = () => {
    if (this.echartsInstances.safeCheckChart) {
      this.echartsInstances.safeCheckChart.dispose();
      this.echartsInstances.safeCheckChart = null;
    }

    let safeCheckCharts = document.getElementById('safeCheckChart');
    if (!safeCheckCharts) {
      requestAnimationFrame(() => {
        this.safeCheckChart();
      });
      return;
    }
    const barTopColor = ['#02c3f1', '#53e568', '#a154e9'];

    this.echartsInstances.safeCheckChart = echarts.init(safeCheckCharts);
    let xdata = [];
    xdata = this.transformDat(this.state.jobTodayTop3, barTopColor, 1);
    this.echartsInstances.safeCheckChart.setOption({
      title: {
        text: '当日工作票排名前三家的数据',
        textStyle: {
          fontSize: 16,
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      legend: {
        data: xdata.legendData,
        align: 'right',
        right: 10,
        itemGap: 16,
        itemWidth: 18,
        itemHeight: 10,
        textStyle: {
          color: '#fff',
          fontStyle: 'normal',
          fontFamily: '微软雅黑',
          fontSize: 14,
        },
      },
      color: barTopColor,
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: xdata.companyNames,
          textStyle: {
            fontSize: 18,
            color: '#ffffff',
          },
          //坐标轴
          axisLine: {
            lineStyle: {
              color: '#3eb2e8',
            },
          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          textStyle: {
            fontSize: 14,
            color: '#ffffff',
          },
          //坐标轴
          axisLine: {
            show: false,
          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
            },
          },
          //分格线
          splitLine: {
            lineStyle: {
              color: '#4784e8',
            },
          },
        },
      ],
      series: xdata.series,
    });

    // 监听resize
    const resizeHandler = () => {
      if (this.echartsInstances.safeCheckChart) {
        this.echartsInstances.safeCheckChart.resize();
      }
    };

    if (this.safeCheckResizeHandler) {
      window.removeEventListener('resize', this.safeCheckResizeHandler);
    }

    this.safeCheckResizeHandler = resizeHandler;
    window.addEventListener('resize', resizeHandler);
  };
  dangerOperation = () => {
    // 如果已有实例，先销毁
    if (this.echartsInstances.dangerOperation) {
      this.echartsInstances.dangerOperation.dispose();
      this.echartsInstances.dangerOperation = null;
    }

    const dangerOperationCharts = document.getElementById('dangerOperationChart');
    if (!dangerOperationCharts) {
      // 使用requestAnimationFrame而不是setTimeout
      requestAnimationFrame(() => {
        this.executionChart();
      });
      return;
    }

    let legendData = [];
    (this.state.linkSum.map((item) => {
      legendData.push(item.name);
    }),
      // 初始化echarts实例并保存引用
      (this.echartsInstances.dangerOperation = echarts.init(dangerOperationCharts)));

    const option = {
      color: [
        '#0090FF',
        '#36CE9E',
        '#e690d1',
        '#FF515A',
        '#8B5CFF',
        '#00CA69',
        '#FFC107',
        '#E91E63',
        '#9C27B0',
        '#3F51B5',
        '#2196F3',
        '#4CAF50',
        '#FF9800',
        '#795548',
        '#607D8B',
      ],
      title: [
        {
          text: '各公司危险作业分类统计',
          x: 'center',
          y: '5%',
          textStyle: {
            fontSize: 16,
            color: '#fff',
          },
        },
      ],
      legend: {
        type: 'scroll',
        orient: 'vertical',
        left: '5%',
        align: 'left',
        top: '5%',
        textStyle: {
          color: '#fff',
        },
        height: 250,
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          const color = params.color;
          return `<div style="display: flex; align-items: center;">
          <span style="
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: ${color};
            margin-right: 8px;
          "></span>
          <span>${params.name}:</span>
          <span style="
            font-weight: bold;
            margin-left: 8px;
            font-size: 16px;
          ">${params.value}</span>
        </div>`;
        },
        backgroundColor: 'rgba(255, 255, 255, 0.5)',
        borderColor: '#FFFFFF',
        borderWidth: 2,
        textStyle: {
          color: '#000',
          fontSize: 14,
          fontWeight: 'normal',
        },
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          minAngle: 20,
          center: ['55%', '50%'],
          radius: ['40%', '65%'],
          clockwise: true,
          avoidLabelOverlap: true,
          hoverOffset: 15,
          label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}：{c}}{e|({d}%)}\n',
            // color: '#FFFFFF',
            textBorderWidth: 0,
            rich: {
              a: {
                padding: [-15, 0, 0, 0],
                fontSize: 15,
                // color: '#FFFFFF',
                textBorderWidth: 0,
                textShadow: 'none',
              },
              e: {
                fontSize: 14,
                // color: '#FFFFFF',
                padding: [-15, 0, 0, 5],
                textBorderWidth: 0,
                textShadow: 'none',
              },
            },
          },
          labelLine: {
            normal: {
              length: 5,
              length2: 3,
              smooth: true,
            },
          },
          data: this.state.linkSum.map((item) => ({
            name: item.name,
            value: item.qty,
          })),
        },
      ],
    };

    this.echartsInstances.dangerOperation.setOption(option);

    // 监听窗口大小变化
    const resizeHandler = () => {
      if (this.echartsInstances.dangerOperation) {
        this.echartsInstances.dangerOperation.resize();
      }
    };

    // 移除旧的监听器
    if (this.dangerOperationResizeHandler) {
      window.removeEventListener('resize', this.dangerOperationResizeHandler);
    }

    this.dangerOperationResizeHandler = resizeHandler;
    window.addEventListener('resize', resizeHandler);
  };
  backLog = () => {
    if (this.echartsInstances.backLogChart) {
      this.echartsInstances.backLogChart.dispose();
      this.echartsInstances.backLogChart = null;
    }

    let backLogCharts = document.getElementById('backLogChart');
    if (!backLogCharts) {
      requestAnimationFrame(() => {
        this.backLogChart();
      });
      return;
    }
    const barTopColor = [
      ['#75baf3', '#2177d5'],
      ['#ffa94d', '#f76707'],
      ['#99ca6e', '#48a447'],
    ];

    this.echartsInstances.backLogChart = echarts.init(backLogCharts);
    let xdata = [];
    xdata = this.transformDat(this.state.taskTop3, barTopColor, 2);
    // 创建图例的渐变色块
    const legendColors = barTopColor.map((gradient) => gradient[0]);
    this.echartsInstances.backLogChart.setOption({
      title: {
        text: '各事项排名前三名统计',
        textStyle: {
          fontSize: 16,
          color: '#fff',
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      legend: {
        data: xdata.legendData.map((name, index) => ({
          name: name,
          // 使用渐变的起始颜色作为图例颜色
          // icon: 'rect',
          itemStyle: {
            color: legendColors[index],
            borderWidth: 0,
          },
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
        })),
        align: 'right',
        right: 10,
        itemGap: 16,
        itemWidth: 18,
        itemHeight: 12,
        textStyle: {
          color: '#fff',
          fontStyle: 'normal',
          fontFamily: '微软雅黑',
          fontSize: 14,
        },
      },
      color: legendColors, // 设置全局颜色

      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: xdata.companyNames,
          textStyle: {
            fontSize: 18,
            color: '#ffffff',
          },
          //坐标轴
          axisLine: {
            lineStyle: {
              color: '#3eb2e8',
            },
          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          textStyle: {
            fontSize: 14,
            color: '#ffffff',
          },
          //坐标轴
          axisLine: {
            show: false,
          },
          //坐标值标注
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
            },
          },
          //分格线
          splitLine: {
            lineStyle: {
              color: '#4784e8',
            },
          },
        },
      ],
      series: xdata.series,
    });

    // 监听resize
    const resizeHandler = () => {
      if (this.echartsInstances.backLogChart) {
        this.echartsInstances.backLogChart.resize();
      }
    };

    if (this.backLogResizeHandler) {
      window.removeEventListener('resize', this.backLogResizeHandler);
    }

    this.backLogResizeHandler = resizeHandler;
    window.addEventListener('resize', resizeHandler);
  };
  completeChart = () => {
    if (this.echartsInstances.completeone) {
      this.echartsInstances.completeone.dispose();
      this.echartsInstances.completeone = null;
    }

    let completeCharts = document.getElementById('completeone');
    if (!completeCharts) {
      requestAnimationFrame(() => {
        this.completeChart();
      });
      return;
    }

    this.echartsInstances.completeone = echarts.init(completeCharts);
    let seriesArr = [];
    let centerArr = [
      ['20%', '50%'],
      ['50%', '50%'],
      ['80%', '50%'],
    ];
    const completeData = this.state.jobFinishRate
      .filter((item) => item.name === '班前会议' || item.name === '岗位当班' || item.name === '岗位交接班')
      .map((item) => {
        return {
          name: item.name,
          value: item.rate,
        };
      });
    const colorArr = [
      [
        [0.2, '#2ec7c9'],
        [0.8, '#b6a2de'],
        [1, '#5ab1ef'],
      ],
      [
        [0.2, '#5470c6'],
        [0.8, '#91cc75'],
        [1, '#fac858'],
      ],
      [
        [0.2, '#4ea397'],
        [0.8, '#22c3aa'],
        [1, '#7bd9a5'],
      ],
    ];
    completeData.forEach((item, index) => {
      seriesArr.push({
        center: centerArr[index],
        axisLine: {
          show: true,
          lineStyle: {
            color: colorArr[index],
            width: 8,
          },
          radius: '90%', // 控制轴线本身的半径
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          length: 8, // 刻度线长度
          distance: 25, // 向内移动距离，负值越大越向内
          lineStyle: {
            color: '#fff', // 刻度线颜色
            width: 1, // 刻度线宽度
          },
        },
        axisLabel: {
          distance: 15, // 标签与刻度线的距离
          textStyle: {
            color: '#fff',
            fontSize: 10,
          },
          // 调整标签偏移
          offset: [0, 0], // [水平偏移, 垂直偏移]
        },
        itemStyle: {
          normal: {
            color: 'auto',
          },
        },
        radius: '80%',
        pointer: {
          show: true,
          width: '8%',
          length: '30%',
        },
        title: {
          textStyle: {
            // fontWeight: 'bolder',
            fontSize: 14,
            color: '#fff',
          },
          offsetCenter: [0, '100%'],
        },
        detail: {
          textStyle: {
            fontWeight: 'bolder',
            fontSize: 16,
            color: '#fff',
          },
          offsetCenter: [0, '68%'],
          formatter: '{value}%',
          // formatter: '{value}万\n(5048人)',
        },
        min: 0,
        max: 100,
        // name: '米类仪表盘',
        type: 'gauge',
        show: false,
        splitNumber: 10,
        data: [
          {
            name: item.name,
            value: item.value,
          },
        ],
      });
    });
    this.echartsInstances.completeone.setOption({
      series: seriesArr,
    });

    // 监听resize
    const resizeHandler = () => {
      if (this.echartsInstances.completeone) {
        this.echartsInstances.completeone.resize();
      }
    };

    if (this.completeResizeHandler) {
      window.removeEventListener('resize', this.completeResizeHandler);
    }

    this.completeResizeHandler = resizeHandler;
    window.addEventListener('resize', resizeHandler);
  };
  safedanger = () => {
    if (this.echartsInstances.opretionTrend) {
      this.echartsInstances.opretionTrend.dispose();
      this.echartsInstances.opretionTrend = null;
    }

    const opretionTrends = document.getElementById('opretionTrend');
    if (!opretionTrends) {
      requestAnimationFrame(() => {
        this.safedanger();
      });
      return;
    }

    this.echartsInstances.opretionTrend = echarts.init(opretionTrends);

    // ... 原有配置代码
    let bgColor = '#000';
    let color = [
      '#0090FF',
      '#36CE9E',
      '#e690d1',
      '#FF515A',
      '#8B5CFF',
      '#00CA69',
      '#FFC107',
      '#E91E63',
      '#9C27B0',
      '#3F51B5',
      '#2196F3',
      '#4CAF50',
      '#FF9800',
      '#795548',
      '#607D8B',
    ];
    const seriesNames = [];
    this.state.listSETrainSum.map((item) => {
      seriesNames.push(item.CN);
    });

    // 生成x轴数据（12个月）
    let xAxisData = [];
    xAxisData = Object.keys(
      this.state.listSETrainSum[0] === undefined || this.state.listSETrainSum[0] === null
        ? {}
        : this.state.listSETrainSum[0]
    )
      .filter((key) => key.startsWith('dtNowYM'))
      .map((key) => this.state.listSETrainSum[0][key].substring(0, 7))
      .sort((a, b) => new Date(a) - new Date(b)); // 按日期升序

    let yAxisData = [];
    yAxisData = this.state.listSETrainSum.map((item) => {
      const values = [];
      for (let i = 0; i <= 5; i++) {
        const key = i === 0 ? 'SUM_TRAIN_HOUR' : `SUM_TRAIN_HOUR_${i}`;
        values.push(item[key]);
      }
      return values;
    });

    // 生成15个系列的数据
    let seriesArr = [];
    for (let i = 0; i < this.state.listSETrainSum.length; i++) {
      seriesArr.push({
        name: seriesNames[i],
        type: 'line',
        smooth: true,
        symbolSize: 6,
        data: yAxisData[i],
      });
    }

    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;
    };
    const option = {
      title: [
        {
          text: '各家公司的安全教育培训学时统计',
          x: 'center',
          y: '5%',
          textStyle: {
            fontSize: 16,
            color: '#fff',
          },
        },
      ],
      backgroundColor: '',
      color: color,
      legend: {
        type: 'scroll', // 如果项目多可以使用滚动
        orient: 'vertical', // 设置为垂直排列
        right: 10, // 距离右侧的距离
        top: 'center', // 垂直居中
        align: 'left', // 文本左对齐
        textStyle: {
          color: '#fff', // 文字颜色
          fontSize: 12,
        },
        itemStyle: {
          color: 'inherit',
          borderWidth: 0,
          opacity: 1,
        },
        symbol: 'rect', // 实心矩形
        symbolSize: [12, 8], // 大小
        itemWidth: 10, // 图例标记的宽度
        itemHeight: 10, // 图例标记的高度
        itemGap: 15, // 图例每项之间的间隔
        pageButtonItemGap: 3,
        pageButtonGap: 5,
        pageButtonPosition: 'end',
        pageIconColor: '#00caf7',
        width: 100, // 限制宽度
        height: 250, // 限制高度，超出就会显示滚动
      },
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          let html = '';
          params.forEach((v) => {
            html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                  color[v.componentIndex]
                };"></span>
                ${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                `;
          });

          return html;
        },
        extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
        axisPointer: {
          type: 'shadow',
          shadowStyle: {
            // color: "#ffffff",
            shadowColor: 'rgba(225,225,225,1)',
            shadowBlur: 5,
          },
        },
      },
      grid: {
        top: '15%',
        left: '5%',
        right: '15%', // 为图例留出空间
        bottom: '15%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: '#fff',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: '#fff',
            },
          },
          data: xAxisData,
        },
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff',
            },
          },
          nameTextStyle: {
            color: '#fff',
            fontSize: 12,
            lineHeight: 40,
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed',
              color: '#fff',
            },
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#00c7ff',
              width: 1,
              type: 'solid',
            },
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: seriesArr,
    };

    this.echartsInstances.opretionTrend.setOption(option);
    // 监听resize
    const resizeHandler = () => {
      if (this.echartsInstances.opretionTrend) {
        this.echartsInstances.opretionTrend.resize();
      }
    };

    if (this.trendResizeHandler) {
      window.removeEventListener('resize', this.trendResizeHandler);
    }

    this.trendResizeHandler = resizeHandler;
    window.addEventListener('resize', resizeHandler);
  };

  render() {
    const width = 1920,
      height = 1080;
    // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
    const { scale, safetySloganOne, animationDuration, sliderColor, sliderSize, activeTab } = this.state;
    const renderContent = () => {
      const riskChangeData = [
        {
          name: '隐患数',
          value: this.state.hiddenRectify.qty,
        },
        {
          name: '按期整改数',
          value: this.state.hiddenRectify.ontimeQty,
        },
        {
          name: '延期整改数',
          value: this.state.hiddenRectify.delayQty,
        },
      ];
      const chartConfig = {
        data: this.state.safeCheckSum.map((item) => ({
          name: item.company,
          value: item.qty,
        })),
        showValue: true,
      };
      const meetingData = this.state.jobFinishRate.map((item) => ({
        name: item.name,
        value: item.qty,
      }));
      if (activeTab === '首页') {
        return (
          <>
            {/* 首页内容 - 原来的两行布局 */}
            <div className={styles.row}>
              <Row style={{ width: '100%', height: '100%' }}>
                {/* 原第一行内容 */}
                <Col span={7} className={styles.boxleft}>
                  {/* 风险等级基本信息 */}
                  <div className={styles.risklevel}>
                    <BorderBox7
                      backgroundColor="transparent"
                      color={['rgba(64,134,244,1)', 'rgba(26,127,229,1)']}
                      style={{
                        boxShadow: 'rgb(27, 116, 225) 0px 0px 50px 10px inset',
                        border: '1px solid rgb(0 99 255)',
                      }}
                    >
                      <Row
                        style={{
                          width: '100%',
                          height: '100%',
                          display: 'flex',
                          alignItems: 'center',
                          flexDirection: 'row',
                          justifyContent: 'center',
                        }}
                      >
                        <Col span={8}>
                          <div>
                            {this.state.riskTypeRate.map((item, index) => (
                              <div
                                key={index}
                                style={{
                                  display: 'flex',
                                  flexDirection: 'column',
                                  alignItems: 'center',
                                  justifyContent: 'center',
                                  fontWeight: 'bold',
                                  color: '#fff',
                                  backgroundColor:
                                    item.riskType === '重大风险'
                                      ? '#c92a2a'
                                      : item.riskType === '较大风险'
                                        ? '#FF6710'
                                        : item.riskType === '一般风险'
                                          ? '#FFDD1E'
                                          : '#0091FF',
                                  margin: '10px 20px',
                                  padding: '5px 10px',
                                  fontSize: '16px',
                                }}
                              >
                                <div style={{ marginBottom: '5px' }}>{item.riskType}</div>
                                <div>{item.count}</div>
                              </div>
                            ))}
                          </div>
                        </Col>
                        <Col span={16} style={{ height: '100%' }}>
                          <div
                            id="riskLevelFull"
                            style={{
                              display: 'flex',
                              flexDirection: 'row',
                              alignItems: 'center',
                              justifyContent: 'center',
                              width: '100%',
                              height: '100%',
                              minHeight: '200px', // 添加最小高度
                            }}
                          ></div>
                        </Col>
                      </Row>
                    </BorderBox7>
                  </div>

                  <div style={{ height: '10px' }}></div>
                  <div className={styles.risklevelOne}>
                    <BorderBox7
                      backgroundColor="transparent"
                      color={['rgba(64,134,244,1)', 'rgba(26,127,229,1)']}
                      style={{
                        boxShadow: 'rgb(27, 116, 225) 0px 0px 50px 10px inset',
                        border: '1px solid rgb(0 99 255)',
                      }}
                    >
                      <div
                        style={{
                          display: 'flex',
                          flexDirection: 'column',
                          alignItems: 'center',
                          justifyContent: 'center',
                          width: '100%',
                          height: '100%',
                          padding: '10px',
                        }}
                      >
                        <div
                          id="safeCheckChart"
                          style={{
                            display: 'flex',
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'center',
                            width: '100%',
                            height: '100%',
                            minHeight: '200px', // 添加最小高度
                          }}
                        ></div>
                      </div>
                    </BorderBox7>
                  </div>
                </Col>

                <Col span={10} className={styles.boxTwo}>
                  {/* 中间内容 */}
                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'row',
                      alignItems: 'center',
                      justifyContent: 'center',
                      width: '100%',
                      // backgroundColor: 'blue',
                      height: '140px',
                      marginBottom: '10px',
                    }}
                  >
                    <BorderBox6>
                      <div
                        style={{
                          width: '100%',
                          height: '100%',
                          padding: '10px',
                          boxSizing: 'border-box',
                        }}
                      >
                        <div
                          style={{
                            width: '100%',
                            height: '100%',
                            backgroundColor: '#121d3f',
                            color: '#fff',
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'center',
                            textAlign: 'center',
                            padding: '10px',
                            boxSizing: 'border-box',
                            border: '1px solid rgba(0, 202, 247, 0.2)',
                            borderRadius: '8px',
                            background: 'linear-gradient(135deg, #121d3f 0%, #1a2b5a 100%)',
                          }}
                        >
                          <div
                            style={{
                              fontSize: '23px', // 响应式字体
                              fontWeight: 'bold',
                              marginBottom: '12px',
                              color: '#fff',
                            }}
                          >
                            安全方针：以人为本、关注健康、依法治企、安全发展。
                          </div>
                          <div
                            style={{
                              fontSize: '23px',
                              fontWeight: 'bold',
                              color: '#fff',
                            }}
                          >
                            安全理念：一切风险皆可控，一切事故皆可防！
                          </div>
                        </div>
                      </div>
                    </BorderBox6>
                  </div>
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      flex: 1,
                      position: 'relative',
                      width: '100%',
                    }}
                  >
                    <BorderBox6
                      backgroundColor="transparent"
                      color={['rgba(64,134,244,1)', 'rgba(26,127,229,1)']}
                      style={{
                        boxShadow: 'rgb(27, 116, 225) 0px 0px 50px 10px inset',
                        border: '1px solid rgb(0 99 255)',
                      }}
                    >
                      <div style={{ width: '100%', height: '100%' }}>
                        <div
                          id="dangerOperationChart"
                          style={{
                            display: 'flex',
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'center',
                            width: '100%',
                            height: '100%',
                            minHeight: '200px', // 添加最小高度
                          }}
                        ></div>
                      </div>
                    </BorderBox6>
                  </div>
                </Col>

                <Col span={7} className={styles.boxTwo}>
                  {/* 右边内容 */}
                  <div className={styles.risklevel}>
                    <BorderBox7
                      backgroundColor="transparent"
                      color={['rgba(64,134,244,1)', 'rgba(26,127,229,1)']}
                      style={{
                        boxShadow: 'rgb(27, 116, 225) 0px 0px 50px 10px inset',
                        border: '1px solid rgb(0 99 255)',
                      }}
                    >
                      <div
                        style={{
                          display: 'flex',
                          flexDirection: 'column',
                          alignItems: 'center',
                          justifyContent: 'center',
                          width: '100%',
                          height: '100%',
                          padding: '10px',
                        }}
                      >
                        <div
                          id="backLogChart"
                          style={{
                            display: 'flex',
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'center',
                            width: '100%',
                            height: '100%',
                            minHeight: '200px', // 添加最小高度
                          }}
                        ></div>
                      </div>
                    </BorderBox7>
                  </div>

                  <div style={{ height: '10px' }}></div>
                  <div className={styles.risklevelOne}>
                    <BorderBox7
                      backgroundColor="transparent"
                      color={['rgba(64,134,244,1)', 'rgba(26,127,229,1)']}
                      style={{
                        boxShadow: 'rgb(27, 116, 225) 0px 0px 50px 10px inset',
                        border: '1px solid rgb(0 99 255)',
                      }}
                    >
                      <div
                        style={{
                          display: 'flex',
                          flexDirection: 'column',
                          alignItems: 'center',
                          width: '100%',
                          height: '100%',
                        }}
                      >
                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'row',
                            alignItems: 'center',
                            width: '100%',
                            height: '50%',
                            justifyContent: 'space-between',
                          }}
                        >
                          <div id="completeone" style={{ width: '100%', height: '100%' }}></div>
                        </div>
                        <div
                          style={{
                            display: 'flex',
                            flexDirection: 'row',
                            alignItems: 'center',
                            width: '100%',
                            height: '50%',
                            justifyContent: 'space-between',
                            marginBottom: '10px',
                          }}
                        >
                          <Row gutter={[8, 8]} style={{ padding: '0px 10px' }}>
                            {meetingData &&
                              meetingData.map((item, index) => (
                                <Col span={6} key={index}>
                                  <div className={styles.gradientThree}>
                                    <div className={styles.gradientNext}>
                                      <div className={styles.gradientNextTwo}>
                                        <div className={styles.gradientName}>{item.name}</div>
                                        <div className={styles.gradientText}>
                                          {item.value}
                                          <span
                                            style={{
                                              marginLeft: '10px',
                                              fontSize: '14px',
                                              color: '#fff',
                                              fontFamily: 'PingFang SC',
                                            }}
                                          >
                                            次
                                          </span>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </Col>
                              ))}
                          </Row>
                        </div>
                      </div>
                    </BorderBox7>
                  </div>
                </Col>
              </Row>
            </div>

            {/* 第二行内容 */}
            <div className={styles.rowTwo}>
              <Row style={{ width: '100%', height: '100%' }}>
                <Col span={7} className={styles.boxleft}>
                  <div className={styles.risklevelTwo}>
                    <BorderBox7
                      backgroundColor="transparent"
                      color={['rgba(64,134,244,1)', 'rgba(26,127,229,1)']}
                      style={{
                        boxShadow: 'rgb(27, 116, 225) 0px 0px 50px 10px inset',
                        border: '1px solid rgb(0 99 255)',
                      }}
                    >
                      <div
                        style={{
                          display: 'flex',
                          flexDirection: 'row',
                          alignItems: 'center',
                          justifyContent: 'center',
                          width: '100%',
                          height: '100%',
                        }}
                      >
                        <div className={styles.riskChange}>
                          {riskChangeData &&
                            riskChangeData.map((item, index) => (
                              <div className={styles.gradient} key={index}>
                                <div className={styles.gradientNext}>
                                  <div className={styles.gradientNextTwo}>
                                    <div className={styles.gradientName}>{item.name}</div>
                                    <div className={styles.gradientText}>{item.value}</div>
                                  </div>
                                </div>
                              </div>
                            ))}
                        </div>
                        <div className={styles.riskChangeTwo}>
                          <div className={styles.gradientTwo}>
                            <div className={styles.gradientNext}>
                              <div className={styles.gradientNextTwo}>
                                <div className={styles.gradientNameTwo}>整改率</div>
                                <div className={styles.gradientTextTwo}>{this.state.hiddenRectify.rate}%</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </BorderBox7>
                  </div>
                </Col>
                <Col span={10} className={styles.boxTwo}>
                  <div
                    style={{
                      display: 'flex',
                      flexDirection: 'column',
                      justifyContent: 'center',
                      width: '100%',
                      height: '100%',
                      alignItems: 'center',
                      padding: '0px 0px 10px 0px',
                    }}
                  >
                    <BorderBox8>
                      <div
                        id="opretionTrend"
                        style={{
                          display: 'flex',
                          flexDirection: 'row',
                          alignItems: 'center',
                          justifyContent: 'center',
                          width: '100%',
                          height: '100%',
                        }}
                      ></div>
                    </BorderBox8>
                  </div>
                </Col>
                <Col span={7} className={styles.boxTwo}>
                  <div className={styles.risklevelTwo}>
                    <BorderBox7
                      backgroundColor="transparent"
                      color={['rgba(64,134,244,1)', 'rgba(26,127,229,1)']}
                      style={{
                        boxShadow: 'rgb(27, 116, 225) 0px 0px 50px 10px inset',
                        border: '1px solid rgb(0 99 255)',
                      }}
                    >
                      <div className={styles.capsuleChart}>
                        <span style={{ fontSize: '16px', color: '#fff', marginBottom: '10px', fontWeight: 'bold' }}>
                          各家公司安全检查统计
                        </span>
                        <CapsuleChart config={chartConfig} style={{ width: '100%', height: '100%' }} />
                      </div>
                    </BorderBox7>
                  </div>
                </Col>
              </Row>
            </div>
          </>
        );
      } else {
        // 其他tab的内容 - 这里可以替换为你想要的其他内容
        return (
          <div className={styles.otherTabContent}>
            <Row style={{ width: '100%', height: '100%' }}>
              <Col
                span={24}
                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}
              >
                <div
                  style={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center',
                    color: '#fff',
                    fontSize: '24px',
                    textAlign: 'center',
                    padding: '20px',
                  }}
                >
                  <div style={{ marginBottom: '20px', fontSize: '32px', fontWeight: 'bold' }}>{activeTab} 页面</div>
                  <div style={{ fontSize: '18px', opacity: 0.8 }}>这里是 {activeTab} 的内容展示区域</div>
                  <div style={{ marginTop: '30px', fontSize: '16px', opacity: 0.6 }}>请根据实际需求替换此内容</div>
                </div>
              </Col>
            </Row>
          </div>
        );
      }
    };
    return (
      <React.Fragment>
        <div
          className={styles.box}
          style={{
            transform: `scale(${scale}) translate(-50%, -50%)`,
            WebkitTransform: `scale(${scale}) translate(-50%, -50%)`,
            width,
            height,
          }}
        >
          <div className={styles.blackBack}>
            <div className={styles.backImage}>
              {/* 头部保持不变 */}
              <div className={styles.header}>
                <Row style={{ width: '100%', height: '100%' }}>
                  <Col
                    span={9}
                    style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '100%' }}
                  >
                    <div
                      style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        flexDirection: 'row',
                        width: '100%',
                        height: '100%',
                      }}
                    >
                      <img
                        src={logo}
                        alt="logo"
                        style={{ height: '50px', width: 'auto', marginRight: 'auto', marginLeft: '50px' }}
                      ></img>
                      <div
                        style={{
                          display: 'flex',
                          flexDirection: 'row',
                          alignItems: 'center',
                          height: '100%',
                          marginLeft: 'auto',
                        }}
                      >
                        {this.state.configBanner &&
                          this.state.configBanner.slice(0, 3).map((item, index) => (
                            <div
                              key={index}
                              className={`${styles.configBanners} ${
                                this.state.activeTab === item ? styles.active : ''
                              }`}
                              onClick={() => this.handleTabClick(item)}
                              onKeyPress={(e) => e.key === 'Enter' && this.handleTabClick(item)}
                              tabIndex={0}
                              title={`点击进入${item}`}
                              role="button"
                              style={{ cursor: 'pointer' }}
                            >
                              {item}
                            </div>
                          ))}
                      </div>
                    </div>
                  </Col>
                  <Col
                    span={6}
                    style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}
                  >
                    <div
                      style={{
                        width: '100%',
                        height: '100%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                      }}
                    >
                      <div className={styles.headerText}>金源公司安全生产管控平台</div>
                    </div>
                  </Col>
                  <Col
                    span={9}
                    style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '100%' }}
                  >
                    <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                      {this.state.configBanner &&
                        this.state.configBanner.slice(3, 6).map((item, index) => (
                          <div
                            key={index}
                            className={`${styles.configBanners} ${this.state.activeTab === item ? styles.active : ''}`}
                            onClick={() => this.handleTabClick(item)}
                            onKeyPress={(e) => e.key === 'Enter' && this.handleTabClick(item)}
                            tabIndex={0}
                            title={`点击进入${item}`}
                            role="button"
                            style={{ cursor: 'pointer' }}
                          >
                            {item}
                          </div>
                        ))}
                    </div>
                    <div style={{ color: '#fff', fontSize: '20px', marginRight: '20px', fontWeight: 'bold' }}>
                      {/* <span style={{ marginRight: '20px' }}>{this.state.nowWeek}</span> */}
                      {this.state.nowDate}
                    </div>
                  </Col>
                </Row>
              </div>

              {/* 条件渲染的内容区域 */}
              {renderContent()}
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default withRouter(connect(({ login }) => ({ login }))(FullScreen));