mh_jy_safe_web/src/layout/FullScreenInter.js

// FullScreenInter.js - 主文件保持简洁
import React from 'react';
import { connect } from 'dva';
import { withRouter } from 'dva/router';
import { Icon, Row, Col } from 'antd';
import styles from './fullinter.less';
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 HomeContent from './FullOther/HomeContent';
import TrainingContent from './FullOther/TrainingContent'; // 新增导入

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 = {
      nowDate: '',
      riskTypeRate: [],
      riskTotal: [
        { name: '年度重大隐患数', value: 1 },
        { name: '年度一般隐患数量', value: 89 },
        { name: '未整改隐患数量', value: 18 },
      ],
      linkSum: [],
      jobTodayTop3: [],
      taskTop3: [],
      scale: getScale(),
      configBanner: ['首页', '风险管控', '隐患治理', '班组建设', '危险作业', '安全培训'],
      mediaList: [],
      currentMediaIndex: 0,
      announcementList: [],
      activeTab: '首页',
      // 新增：培训数据
      trainingData: {
        listNAME: [],
        YearCount: [],
        MonthRecordCount: [],
        MonthPersonCount: [],
      },
      // 新增：安全培训页面专用数据
      trainingSubData: {
        listNAME: [],
        YearCount: [],
        MonthRecordCount: [],
        MonthPersonCount: [],
      },
      trainingSubDataMonth: {
        listNAME: [],
        YearCount: [],
        MonthRecordCount: [],
        MonthPersonCount: [],
      },
      trainingSubIDCard: {},
      trainingSubBSType: {},
      companyData: [],
      // 新增：当前选择的月份
      selectedMonth: new Date().getMonth() + 1, // 默认当前月份，1-12
      selectedCompany: '',
    };
    this.isUnmounted = false;
  }

  setScale = debounce(() => {
    if (this.isUnmounted) return;
    this.setState({ scale: getScale() });
  }, 500);

  toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen?.();
    } else {
      document.exitFullscreen?.();
    }
  };

  componentDidMount() {
    this.isUnmounted = false;
    window.addEventListener('resize', this.setScale);
    // this.getHomeDataArray();
    this.getYearPXData();
    this.loadMediaFiles();
    this.getAnnouncementData();

    this.timer = setInterval(() => {
      if (!this.isUnmounted) this.setState({ nowDate: this.getDate() });
    }, 1000);

    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
  }

  getAnnouncementData = () => {
    this.setState({
      announcementList: [
        { id: 1, title: '关于2024年安全生产月活动的通知', publishTime: '2024-06-01', url: '' },
        { id: 2, title: '公司第三季度安全培训安排', publishTime: '2024-05-28', url: '' },
        { id: 3, title: '关于开展安全隐患排查整治工作的通知', publishTime: '2024-05-20', url: '' },
        { id: 4, title: '安全生产标准化建设阶段性总结', publishTime: '2024-05-15', url: '' },
        { id: 5, title: '关于表彰2024年第一季度安全生产先进单位的决定', publishTime: '2024-05-10', url: '' },
      ],
    });
  };

  loadMediaFiles = () => {
    this.setState({
      mediaList: [
        { type: 'image', url: 'http://10.2.7.18:28028//WZ_Images/static/smyzw@2x.png' },
        { type: 'video', url: 'http://10.2.7.18:28028/WZ_Images/Img_JFSC/welcom/1.mp4' },
      ],
    });
  };

  handleCarouselChange = (current) => {
    this.setState({ currentMediaIndex: current });
  };

  handleDotClick = (index) => {
    this.setState({ currentMediaIndex: index });
  };

  handleTabClick = (name) => {
    this.setState({ activeTab: name });
    // 当点击安全培训tab时，获取对应数据
    if (name === '安全培训') {
      this.getHomeSESubYearData();
      this.getHomeSESubYearMonthData();
      this.getHomeSESubIDCardData();
      this.getBSTypeMonthData();
      this.getCompanyData();
    }
  };

  handleFullscreenChange = () => {
    this.forceUpdate();
  };

  componentWillUnmount() {
    this.isUnmounted = true;
    window.removeEventListener('resize', this.setScale);
    if (this.timer) clearInterval(this.timer);
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
  }

  getDate = () => {
    const myDate = new Date();
    const year = myDate.getFullYear();
    const mon = myDate.getMonth() + 1;
    const date = myDate.getDate();
    let hours = myDate.getHours();
    let minutes = myDate.getMinutes();
    let seconds = myDate.getSeconds();
    hours = hours < 10 ? '0' + hours : hours;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    return `${year} 年 ${mon} 月 ${date} 日 \t\t\t${hours} : ${minutes} : ${seconds}`;
  };

  getHomeDataArray = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BIKanBanController/ReturnAllData',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          this.setState({
            riskTypeRate: ret.riskTypeRate || [],
            linkSum: ret.linkSum || [],
            jobTodayTop3: ret.jobTodayTop3 || [],
            taskTop3: ret.taskTop3 || [],
          });
        }
      },
    });
  };
  getYearPXData = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BIHeadSE/SEtrInfo',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          this.setState({
            trainingData: {
              listNAME: ret.listNAME || [],
              YearCount: ret.YearCount || [],
              MonthRecordCount: ret.MonthRecordCount || [],
              MonthPersonCount: ret.MonthPersonCount || [],
            },
          });
        }
      },
    });
  };
  // 获取安全培训页面数据
  getHomeSESubYearData = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    const currentYear = new Date().getFullYear(); // 获取当前年份
    json.Parameter1 = currentYear.toString(); // 设置为当前年份
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BIHeadSE/HomeSESubYear',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          // ret 是数组格式: [{ CName: "邦泰", PCount: 0, RCount: 13 }, ...]
          const listNAME = ret.map((item) => item.CName);
          const MonthPersonCount = ret.map((item) => item.PCount); // 培训人次
          const MonthRecordCount = ret.map((item) => item.RCount); // 培训场次
          // YearCount 暂时用 PCount 的总和或保持为空数组
          const YearCount = ret.map((item) => item.PCount);

          this.setState({
            trainingSubData: {
              listNAME: listNAME,
              YearCount: YearCount,
              MonthRecordCount: MonthRecordCount,
              MonthPersonCount: MonthPersonCount,
            },
          });
        }
      },
    });
  };
  // 新增：处理月份变化
  handleMonthChange = (month) => {
    this.setState({ selectedMonth: month }, () => {
      // 重新获取月份数据
      this.getHomeSESubYearMonthData();
    });
  };
  handleCompanyChange = (company) => {
    console.log(company, '11111');
    this.setState({ selectedCompany: company }, () => {
      // 重新获取月份数据
      this.getBSTypeMonthData();
    });
  };
  // 获取安全培训页面数据
  getHomeSESubYearMonthData = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    const currentYear = new Date().getFullYear(); // 获取当前年份
    json.Parameter1 = currentYear.toString(); // 设置为当前年份
    json.Parameter2 = this.state.selectedMonth.toString(); // 月份
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BIHeadSE/HomeSESubYear',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          // ret 是数组格式: [{ CName: "邦泰", PCount: 0, RCount: 13 }, ...]
          const listNAME = ret.map((item) => item.CName);
          const MonthPersonCount = ret.map((item) => item.PCount); // 培训人次
          const MonthRecordCount = ret.map((item) => item.RCount); // 培训场次
          // YearCount 暂时用 PCount 的总和或保持为空数组
          const YearCount = ret.map((item) => item.PCount);

          this.setState({
            trainingSubDataMonth: {
              listNAME: listNAME,
              YearCount: YearCount,
              MonthRecordCount: MonthRecordCount,
              MonthPersonCount: MonthPersonCount,
            },
          });
        }
      },
    });
  };
  getHomeSESubIDCardData = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = String(currentDate.getMonth() + 1).padStart(2, '0');
    const day = String(currentDate.getDate()).padStart(2, '0');
    const currentDateStr = `${year}-${month}-${day}`; // 例如：2024-06-15

    json.Parameter1 = currentDateStr; // 设置为当前日期
    json.Parameter2 = this.state.selectedCompany.toString(); // 月份
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BIHeadSE/SubCertificateType',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          this.setState({
            trainingSubIDCard: ret,
          });
        }
      },
    });
  };
  getBSTypeMonthData = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    const currentDate = new Date();
    const year = currentDate.getFullYear();
    const month = String(currentDate.getMonth() + 1).padStart(2, '0');
    const day = String(currentDate.getDate()).padStart(2, '0');
    const currentDateStr = `${year}-${month}-${day}`; // 例如：2024-06-15

    json.Parameter1 = currentDateStr; // 设置为当前日期
    json.Parameter2 = this.state.selectedCompany;
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'BI/BIHeadSE/SubTypeMonth',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          this.setState({
            trainingSubBSType: ret,
          });
        }
      },
    });
  };
  getCompanyData = () => {
    const orgId = storage('lacal').getItem('webOrgId')?.val;
    const json = initFilter(orgId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'FM/Organization/OrderPaged',
      onComplete: (ret) => {
        if (ret && !this.isUnmounted) {
          this.setState({
            companyData: ret,
          });
        }
      },
    });
  };

  renderOtherTabContent = () => {
    const {
      activeTab,
      trainingData,
      trainingSubData,
      trainingSubDataMonth,
      selectedMonth,
      selectedCompany,
      trainingSubBSType,
      companyData,
    } = this.state;
    // 如果是安全培训，显示专门的培训页面
    if (activeTab === '安全培训') {
      return (
        <TrainingContent
          trainingData={trainingData}
          trainingSubData={trainingSubData}
          trainingSubBSType={trainingSubBSType}
          companyData={companyData}
          trainingSubDataMonth={trainingSubDataMonth}
          selectedMonth={selectedMonth}
          selectedCompany={selectedCompany}
          onMonthChange={this.handleMonthChange}
          onCompanyChange={this.handleCompanyChange}
        />
      );
    }
    return (
      <div className={styles.otherTabContent}>
        <div style={{ textAlign: 'center', color: '#fff' }}>
          <div style={{ fontSize: '32px', fontWeight: 'bold', marginBottom: '20px' }}>{activeTab} 页面</div>
          <div style={{ fontSize: '18px', opacity: 0.8 }}>这里是 {activeTab} 的内容展示区域</div>
          <div style={{ marginTop: '30px', fontSize: '16px', opacity: 0.6 }}>请根据实际需求替换此内容</div>
        </div>
      </div>
    );
  };

  render() {
    const width = 1920,
      height = 1080;
    const {
      scale,
      activeTab,
      riskTypeRate,
      riskTotal,
      jobTodayTop3,
      linkSum,
      taskTop3,
      mediaList,
      announcementList,
      currentMediaIndex,
      trainingData,
    } = this.state;

    return (
      <div className={styles.box} style={{ transform: `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%', display: 'flex', alignItems: 'center' }}>
                <Col span={9} style={{ display: 'flex', alignItems: 'center' }}>
                  <img src={logo} alt="logo" style={{ height: '50px', marginLeft: '50px' }} />
                  <div style={{ display: 'flex', marginLeft: 'auto' }}>
                    {this.state.configBanner.slice(0, 3).map((item, index) => (
                      <div
                        key={index}
                        className={`${styles.configBanners} ${activeTab === item ? styles.active : ''}`}
                        onClick={() => this.handleTabClick(item)}
                      >
                        {item}
                      </div>
                    ))}
                  </div>
                </Col>
                <Col span={6} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <div className={styles.headerText}>金源公司安全生产管控平台</div>
                </Col>
                <Col span={9} style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
                  <div style={{ display: 'flex' }}>
                    {this.state.configBanner.slice(3, 6).map((item, index) => (
                      <div
                        key={index}
                        className={`${styles.configBanners} ${activeTab === item ? styles.active : ''}`}
                        onClick={() => this.handleTabClick(item)}
                      >
                        {item}
                      </div>
                    ))}
                  </div>
                  <Icon
                    type={document.fullscreenElement ? 'fullscreen-exit' : 'fullscreen'}
                    style={{ fontSize: '26px', color: '#000', cursor: 'pointer', margin: '0 20px' }}
                    onClick={this.toggleFullscreen}
                  />
                  <div style={{ color: '#000', fontSize: '14px', marginRight: '20px', fontWeight: 'bold' }}>
                    {this.state.nowDate}
                  </div>
                </Col>
              </Row>
            </div>

            {/* 内容区域 */}
            {activeTab === '首页' ? (
              <HomeContent
                riskTypeRate={riskTypeRate}
                riskTotal={riskTotal}
                jobTodayTop3={jobTodayTop3}
                linkSum={linkSum}
                taskTop3={taskTop3}
                mediaList={mediaList}
                announcementList={announcementList}
                currentMediaIndex={currentMediaIndex}
                onCarouselChange={this.handleCarouselChange}
                onDotClick={this.handleDotClick}
                trainingData={trainingData} // 新增传递
              />
            ) : (
              this.renderOtherTabContent()
            )}
          </div>
        </div>
      </div>
    );
  }
}

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